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内 容 提 要 


本 书 是 知名 设计 网 站 Smashing Magazine 上 线 以 来 的 精华 总 结 ， 来 球 的 
知名 设计 师 无 私 地 分 享 了 他 们 多 年 积累 的 宝贵 经 验 。 全 书 共 分 10 章 , BUS 
章 讨论 了 和 网 站 U 设计 相关 的 八 个 不 同 的 领域 ， 玫 盖 面 非常 广 ， 具 有 很 强 
的 操作 性 和 专业 性 ， 全 书 逻 辑 严密 、 言 简 意 赎 ， 设 计 人 员 可 以 快速 地 找 型 
己 想 要 的 东西 。 第 9 章 以 访谈 的 形式 介绍 了 多 位 专家 对 一 系列 重要 问题 的 
法 ， 入 木 三 分 , F SAVE, B10 章 以 讲 故事 的 方式 ， 把 Smashing Maga- 
zine 的 创办 和 发 展 过 程 娓 娓 道 来 ， 同 时 毫 不 保留 地 分 享 了 两 位 创始 人 的 成 功 
秘诀 和 价值 观 ， 让 人 受益 菲 浅 。 

本 书 最 大 的 价值 在 于 它 在 传授 具体 经 验 的 同时 ， 也 对 设计 思想 和 设计 理念 进 
行 了 深入 的 探讨 ， 在 “ 授 人 以 鱼 ” 的 同时 ， 不 忘 “ 授 人 以 渔 "。 相 信 广 大 读 
者 读 完 这 本 书 ， 一 定 会 有 一 种 相识 恨 晚 的 感觉 。 
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人 可 以 使 简单 的 事情 变 得 复杂 ， 通 过 常规 的 方式 写 一 本 书 对 我 们 而 言 算 不 上 
什么 挑战 ， 从 撰 稿 者 的 名 单 可 以 证 明 这 一 点 。 我 们 希望 尽 可 能 多 的 人 参与 进 
来 : 作者 、 设 计 师 和 插画 师 。 实 际 上 ， 在 圈 儿 内 ， 我 们 把 这 个 小 小 的 项 目 称 
为 “社区 之 书 "。 然 而 ， 这 本 书 并 不 是 这 个 社区 成 员 的 作品 ， 而 是 由 一 个 
业 的 作家 团队 创作 的 。 在 成 书 过 程 人 头脑 风暴 到 最 终 的 版 面 设计 ), 我 
们 把 读者 也 包含 在 了 计划 里 面 : 我 们 在 论坛 (Smashing Forum ) 中 向 人 们 征 
上 意见， 并 聆听 他 们 的 观点 。 当 然 ， 所 有 的 这 些 前 期 的 辛劳 ， 也 可 以 吊 起 读 
者 的 o。 成 果 现 在 就 握 在 你 们 的 手中 ,这 是 Smashing Magazine 的 第 一 本 书 。 
我 们 希望 至 少 做 了 一 些 大 家 看 来 正确 的 事情 。 





















































































































































































































































































































































































































































































































































本 书包 含 了 Smashing Magazine 精心 准备 、 精 心 编写 以 及 精心 编辑 的 内 容 ， 

< 都 基于 Smashing Magazine 读者 的 建议 和 意愿 。 我 们 认为 本 书包 含 的 主 
题 是 至 关 重 要 的 ， 所 以 ， 我 们 希望 本 书 的 内 容 对 您 来 说 非常 实用 。 在 http:// 
smashing-links.com 提供 的 一 份 便捷 的 概述 中 ， 你 会 发 现 本 书 参考 和 提 到 的 
全 部 资源 的 列表 。 


通过 书评 或 评论 的 方式 ， 让 我 们 知道 你 对 本 书 的 看 法 。 愿 你 们 在 本 书 中 找 
Bl TR PRADA SE T AYRES | 
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现代 网 络 应 用 中 的 用 户 界面 设计 











































































































































































































设计 得 更 好 ? 这 一 章 ， 我 们 就 来 了 解 一 下 现代 互联 网 应 用 程序 中 可 视 用 户 界 
面 设计 的 理论 演化 和 技术 更 新 。 


1.1 什么 是 用 户 界 面 ( UI) ? 


“在 你 使 用 工具 完成 任务 的 过 程 中 ， 你 所 做 的 操作 以 及 工具 的 响应 ， 这 些 结 
合 起 来 就 构成 了 界面 。。 一 Jef Raskin 
PEE RE 个 界面 时 ， 仍 然 能 发 现 某 些 元 素 是 他 们 所 熟知 的 。 


3 户 界面 设计 并 不 仅仅 是 考虑 如 何 摆 放 按钮 和 菜单 ， 更 为 重要 的 是 考虑 应 用 
程序 或 设备 如 何 与 用 户 互动 ; 更 多 时 候 ， 还 要 考虑 产品 与 多 个 用 户 之 间 的 互动 。 
这 就 意味 着 ， 用 户 界面 设计 不 仅 要 做 出 好 看 的 产品 外 观 ， 还 要 做 出 好 用 的 产品 。 
这 不 仅仅 是 调整 一 下 按钮 的 位 置 、 给 他 们 选 选 颜色 ， 而 是 要 为 完成 一 项 任务 而 选 
择 正 确 的 工具 。 一 个 特殊 的 界面 ， 是 否 需要 使 用 按钮 ”如果 确实 需要 ， 那 么 这 些 
按钮 将 完成 + 么 样 的 工作 ?这 个 按钮 | 需要 如 人 设计 才能 让 用 户 了 解 这 个 应 用 程 
亨 的 工作 方式 ， 并 且 轻 松 达到 用 户 的 目的 。 


在 产品 的 开发 周期 中 ， 尽 台 用 户 界 面 设计 至 关 重 要 。 正 如 Jef Raskin 所 
说 :对 消费 者 而 言 , 界面 就 是 产品 “。 用 户 一 直 看 到 和 使 用 的 都 是 用 户 界面 ， 
而 不 是 深 藏 在 应 用 程序 背后 的 技术 体系 结构 。 把 界面 做 好 ， 这 将 极 大 地 提高 
才 的 愉悦 感 , 这 也 能 让 其 很 容易 就 掌握 产品 的 使 用 方法 。 所 以 ， 
始 开始 应 用 程序 后 台 引 警 的 编码 ， 要 好 于 先 开始 编 











什么 是 用 户 界面 设计 ? 什么 是 有 效 的 用 户 界 面 设计 ?3 你 打算 如 何 把 用 户 界 下 
? 
AS 
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什么 因素 能 成 就 一 个 伟大 的 用 户 界面 
在 我 们 开始 着 手 设计 用 户 界 面 之 前 ， 首 先 应 该 理解 什么 样 的 用 户 界 面 才 是 
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1 Raskin,J. 2000 The Humane Interface Addison Wesley, 
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色 的 用 户 界 面 ， 我 们 的 设计 要 具备 哪些 品质 才 够 得 上 “出 色 "。 所 有 伟大 的 
户 界 面 大 都 具有 下 面 这 8 个 品质 或 特点 。 
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通过 使 用 文字 、 流 程 医 和 、 图 标 等 元 素 ， 避 人 免 用 户 对 界 
可 产生 困惑 。 清 晰 的 界面 不 需要 手册 ， 同 时 还 能 确保 用 户 在 使 用 的 过 程 
减少 犯错 。 
2. 简洁 一 一 为 了 让 界面 清晰 ， 可 以 通过 在 所 有 元 素 上 添加 A 
签 这 种 简单 的 方法 来 实现 ， 但 这 样 做 会 导致 界面 膨胀 腔 肿 。 如 果 电 脑 屏 幕 上 同 
时 充斥 了 太 多 的 东西 ， 找 到 你 想 要 的 东西 是 非常 困难 的 ， 用 户 使 用 起 来 就 觉得 
天 难 乏味 。 如 何 让 界面 同时 保持 简洁 和 清晰 ， 这 正 是 设计 伟大 界面 的 挑战 
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3. 熟悉 一 一 人 们 总 是 对 之 前 见 过 的 东西 种 熟悉 的 感觉 ， 有 的 界面 即使 
是 第 一 次 使 用 ， 鸭 有 些 元 素 我 们 还 是 会 感觉 很 熟悉 。 在 设计 过 程 中 ， 
使 用 一 些 现实 生活 中 公认 的 意象 和 "理解 。 例 如， 文件 











































































































和 在 用 ， 人 们 很 快 就 能 意 
夹 来 分 类 资料 的 。 
4. 响应 性 这 意味 着 两 件 事情 。 首 先 ， 响 应 必须 迅速 ， 一 个 良好 的 界 画 

不 应 该 让 人 感觉 反应 迟缓 。 其 次 ， 界 面 应 该 提醒 用 户 发 生 了 什么 事 ， 
户 的 输入 是 否 成 功 地 处 理 , 让 用 户 了 解 这 些 信 息 反馈 。 并 且 明 确 告诉 用 户 ， 
他 的 请 求 已 经 被 成 功 受 理 。 
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夹 样式 的 选项 卡通 常 在 网 站 和 应 用 程序 中 起 导航 
j 也 




































































































































































































































































































































































































































































































































































5. 一 致 性 一 一 在 整个 应 用 程序 中 保持 界面 一 致 是 非常 重要 的 ， 这 能 够 让 用 
户 识别 出 使 用 的 模式 。 户 学 会 了 界面 中 某 个 部 分 的 操作 ， 他 很 快 
就 能 知道 如 何在 其 他 地 方 或 其 他 特性 上 进行 操作 ， 就 好 像 他 们 早 就 知道 似 














































































































6. 美学 性 一 一 尽管 你 不 需要 把 一 个 界面 做 得 非常 有 吸引 力 ， 但 是 有 一 个 好 
的 界面 会 让 用 户 工作 起 来 更 开心 。 况 且 ， 让 用 户 开心 绝对 是 一 件 好 事 。 
7. 高 效 性 一 一 时 间 就 是 金钱 ， 一 个 伟大 的 界面 应 当 通 过 快捷 菜单 或 者 良 交 
的 设计 来 帮助 用 户 提高 工作 效率 。 毕 竟 这 是 科技 带 给 我 们 的 一 个 最 大 好 
处 ， 它 允许 我 们 用 更 少 的 时 间 和 努力 来 完成 更 多 的 工作 。 
8. 容错 性 性 个 人 都 会 犯错 ， 你 的 应 用 程序 如 何 处 理 用 户 所 犯 的 错误 是 

对 它 的 总 体质 量 的 最 好 测试 。 它 是 否 容易 撤消 操作 ? 是 否 容易 恢复 删除 






































































































































































































































































































































































































































现代 网 络 应 用 中 的 用 户 界面 设计 




























































































的 文件 ? 一 个 好 的 用 户 界 面 不 应 当 因为 用 户 的 错误 而 惩罚 用 户 ， 而 应 该 
总 是 为 用 户 提供 犯错 之 后 的 补救 方法 。 

想 要 设计 一 个 包含 所 有 特性 的 用 户 界面 非常 困难 ， 
o TK 兽 加 的 元 素 越 多 ， 用 户 在 使 用 上 所 花 的 努力 就 越 大 。 当 然 ， 
反 过 来 亦 是 如 此 。 没 有 足够 的 帮助 和 支持 ， 会 茫然 不 知 所 措 。 如 何 设计 既 
简洁 、 优 雅 , 又 清晰 、 一致 的 用 户 界面 , 是 摆 在 用 户 界面 设计 师 面 前 的 最 大 难题 。 


1.2 ”可 视界 面 设计 的 工具 箱 


可 视界 面 设计 就 是 让 用 户 能 够 在 他 们 的 电子 设备 屏幕 上 看 到 你 的 界面 的 物理 
表现 的 过 程 。 可 视界 面 设 计 的 主要 目的 是 通过 精心 制作 合适 的 可 视界 面 ， 让 
aE 解 应 用 程序 的 用 途 以 及 如 何 操作 应 用 程序 。 
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可 视界 面 设 讨 系列 过 程 组 成 。 选 择 合适 的 类 型 、 对 齐 每 个 元 素 、 将 不 同 
元 素 以 一 种 有 意义 的 方式 组 合 起 来 ， 用 户 界 面 中 不 同 的 功能 和 特性 借 此 传递 
给 了 有 用户。 下面 就 是 可 视界 面 设计 中 的 一 些 主要 元 素 。 





















































1.2.1 布局 和 定位 

布局 规定 了 界面 中 所 有 可 视 元 素 的 结构 。 通 过 元 素 之 间 的 距离 ， 还 确定 了 元 
素 之 间 的 层级 和 相互 关系 。 元 素 距离 比较 近 表 明 它 们 之 间 存 在 相互 关联 ， 例 
如 图 标 下 面 的 标签 。 定 位 也 能 改变 整个 界面 的 流畅 性 。 例 如 将 标签 放 在 文本 
输入 框 的 上 面 ， 而 不 是 左边 , 这 样 我 们 就 可 以 方便 地 从 上 往 下 扫描 所 有 元 素 ， 
而 不 需要 先 看 左边 ， 然 后 再 找 右边 哪个 输入 框 与 其 对 应 。 


1.2.2 ”形状 和 尺寸 

形状 通常 用 来 区 分 元 素 。 例 如 ， 通 过 改变 图 标的 外 形 ， 能 够 让 它们 被 更 快 、 
更 容易 地 辨认 出 来 。 尺 寸 经 常用 来 表示 重要 性 ， 越 大 的 元 素 就 越 重 要 。 尺 十 
也 可 以 改变 可 点 击 控件 的 可 用 性 。 费 茨 定律 告诉 我 们 , 一 个 可 点 击 区 域 越 大 ， 
3 户 将 鼠标 移动 到 该 区 域 就 更 快 。 把 经 常 使 用 的 按钮 做 大 ， 不 仅 让 用 户 的 点 
击 变 得 更 容易 ， 同 时 提升 了 点 击 率 。 

1.23 ”颜色 

多 地 方 都 用 至 


















































































































































































































































































































































































































































































































































































































































颜色。 一 种 颜色 在 与 它 反 差 强 烈 的 背景 色 下 是 能 够 豚 引 人 的 
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1.2 可 视界 面 设计 的 工具 箱 众 妙 之 门 
































注意 ( 比如 ， 在 白色 背景 中 的 一 个 亮 黄色 警示 箱 )。 不 同 的 颜色 可 以 表示 不 
同 的 意义 。 例 如 ， 红 色 经 常用 来 表示 危险 或 停止 ( 交通 灯 里 的 红 灯 )， 所 以 
最 好 用 红色 来 表示 错误 信息 。 而 绿色 一 般 用 来 表示 成 功 或 者 继续 进行 的 信号 ， 
所 以 应 当 用 在 表示 这 类 信息 的 内 容 上 。 颜 色 也 可 以 用 来 突出 显示 一 些 关 系 ， 
例如 在 编辑 的 时 候 , 根据 按钮 的 关系 , 以 不 同 颜色 高 亮 显 示 , 来 帮助 用 户 识别 。 


创造 一 个 产品 的 外 观 和 感觉 并 不 是 可 视界 面 设计 的 主要 目的 ， 而 仅仅 是 一 个 部 分 。 最 


主要 的 目的 还 是 沟通 : 通过 沟通 的 行为 帮助 用 户 理解 应 用 程序 。 
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在 使 用 颜色 的 时 候 要 记 住 两 件 事 。 首 先 ， 不 同文 化 中 颜色 代表 的 含义 有 所 不 
以 确保 你 的 目标 用 户 能 够 识 解 你 所 选 颜色 


























的 含义 。 其 次 ， 不 要 忘记 色 
， 在 区 分 不 同 元 素 时 ， 多 花 一 些 心思 ， 使 用 一 些 颜 色 以 外 的 技巧 ， 例 

中 的 长 条 。 如 果 用 户 是 色盲 ， 他 们 就 不 能 区 分 特定 的 颜色 ， 多 数 
都 是 红 绿 色盲 ， 所 以 你 需要 使 用 其 他 的 方法 ， 例 如 形状 、 材 质 等 。 
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个 元 素 周 围 的 黑暗 或 者 明亮 将 会 对 元 素 在 界面 上 的 可 用 性 产生 影响 ， 这 
寺 比 度 在 起 作用 。 和 白色 背景 中 的 黑色 文本 高 对 比 度 ， 比 起 白色 背 
景 中 的 灰色 文字 ， 更 容易 辨认 和 阅读 。 调 低 一 些 元 素 的 对 比 度 ， 将 它们 融入 



































































































































































































































































































































到 背景 当中 ， 用 户 就 能 够 区 分 出 重要 元 素 和 次 要 元 素 。 
1.2.5 ”材质 
(ERE AIRY 个 概念 叫做 Affordances Affordance 是 一 种 能 够 让 用 户 明 白 如 


































































































何 使 用 一 种 东西 的 特质 。 以 把 手 为 例 ， 做 一 个 单 向 门 的 最 好 办 法 就 是 在 拉 的 

面 安装 一 个 把 手 ， 在 推 的 那 一 面 装 一 个 平坦 的 手柄 挡 板 。 看 到 门 ， 人 们 
就 知道 什么 时 候 拉 、 什 么 时 候 推 ， 因 为 门 把 手 已 经 告诉 了 和 人们 如 何 去 使 用 。 
就 是 说 ， 提 供 了 最 好 的 互动 方式 ， 来 让 用 户 集中 精力 于 正确 的 一 个 上 面 。 


我 们 可 以 把 这 个 主意 应 用 到 用 户 界 面 设计 中 ， 在 屏幕 上 使 用 材质 。 例 如 ， 在 可 
视界 面 中 一 些 元 素 是 可 以 拖 搜 的 ， 就 像 在 一 个 窗口 的 四 角 ， 我 们 可 以 对 这 个 窗 

进行 缩放 。 为 了 让 用 户 知道 可 以 点 击 、 拖 搜 它 ， 通 常会 使 用 一 些 粗糙 介质 的 
突起 。 现 实生 活 中 ， 那 些 可 以 用 手 拉 的 物品 通常 会 具有 比较 粗糙 的 材质 。 这 个 


主意 被 转移 到 了 屏幕 上 ， 不 同 的 是 我 们 不 再 用 手指 ， 而 是 用 鼠标 来 进行 拖 搜 。 
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现代 网 络 应 用 中 的 用 户 界面 设计 





1.3 ”制作 有 效用 户 界面 的 实用 技巧 


我 们 已 经 讨论 过 什么 是 用 户 界 面 ， 用 户 界 面 应 该 具备 什么 样 的 特点 ， 以 及 我 
们 可 以 使 用 的 构建 用 户 界面 的 工具 ， 现 在 让 我 们 看 一 些 可 以 应 用 在 你 的 网 络 
应 用 或 网 站 上 的 实用 技术 。 


1.3.1 使 用 空白 来 构建 联系 
空白 指 在 各 种 内 容 元 素 之 间 的 空白 区 域 ， 比 如 标题 、 正 文 和 按钮 。 当 在 不 同 
元 素 间 建立 联系 时 , 空白 是 一 个 非常 重要 的 工具 。 通 过 缩小 元 素 之 间 的 空白 ， 




























































































































































































































































































































































































































































































能 够 把 一 些 相 关 的 项 目 组 成 一 组 。 增 加 这 些 分 组 之 间 的 空白 能 够 更 加 强调 这 
些 分 组 与 其 他 内 容 之 间 的 联系 。 使 用 空白 ， 我 们 可 以 分 组 相关 的 控件 ， 也 可 
以 构建 页 面 中 元 素 之 间 的 层级 关系 。 


























Archive Report spam. Delete | | Moveto w | Labels v | More actions v Refresh 


Select All, None, Read, Unread, Starred, Unstarred 
Gmail 的 工具 栏 通过 空白 的 分 割 突出 了 3 个 分 组 。 每 个 分 组 中 的 按钮 都 对 应 着 不 
同 的 功能 。 


1.3.2 ”使 用 圆 角 来 定义 边界 
到 角 通 常用 来 改善 图 片 元 素 的 观感 。 它 们 看 起 来 非常 舒服 ， 并 且 能 够 为 你 的 
界面 增添 平滑 感 ， 但 这 并 不 是 圆 角 的 全 部 功能 。 圆 角 通常 定义 一 个 对 象 的 边 

1 圆 角 时 ， 你 就 知道 已 经 到 了 容器 的 边界 。 如 果 是 一 个 直角 ， 后 面 
再 跟 另 一 个 直角 的 容器 ， 它 们 之 间 的 界限 会 不 太 明 显 。 而 圆 角 ， 或 其 他 任 作 
类 似 视觉 上 的 处 理 ， 都 能 够 让 分 界线 变 得 更 为 明显 。 
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Your Clients 








— n— 
































注意 在 Ballpark 的 客户 列表 中 ， 圆 角 是 如 何 来 突出 每 条 记录 的 界限 的 。 在 每 个 记 
录 的 中 间 也 有 两 个 ， 但 是 它们 是 用 作 相 关 数 据 之 间 的 分 割 线 ， 而 不 是 一 个 
条 目的 边缘 。 
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1.3 制作 有 效用 户 界面 的 实用 技巧 众 妙 之 门 





1.3.3 ”用 颜色 来 表达 含义 
颜色 是 一 个 重要 的 沟通 工具 ， 例 如 ， 定 义 不 同 的 元 素 。 你 可 以 在 应 用 程序 中 
更 用 不 同 的 颜色 来 区 分 不 同 功能 的 按钮 。 红 色 常 被 用 在 一 些 表示 破坏 性 的 按 
钮 上 ， 诸 如 删除 或 移动 ， 蓝 色 一 般 用 在 标准 按钮 上 ;绿色 则 用 在 保存 和 更 新 
操作 按钮 上 。 使 用 代码 着 色 ， 我 们 可 以 分 辨 出 屏幕 中 用 户 创建 的 各 种 各 样 的 
数据 ， 让 它们 变 得 更 容易 阅读 。 


1.3.4 引导 用 户 的 注意 力 






























































































































































































































































































































































































































































































































































































































































使 3 动画 来 提醒 j 户 关注 。 时 候 ， 单 | A A EENAA FOS 2 
e a Share ng with My Colleagues” — 
独 使 用 颜色 和 对 比 度 还 不 足以 吸引 用 | 本 
的 注意 。 如 果 一 件 很 重要 的 事情 发 生 了 ， e o SE 
你 也 确实 需要 确保 用 户 能 够 注意 到 , 那 Queers ia 
么 就 使 用 动画 。 人 类 的 眼睛 非常 适合 捕 2 Pme Sea em 
捉 移 动 的 事物 ， 特 别 是 在 固定 背景 中 运 
on me i» 当 你 在 Yammer 上 发 布 一 条 信息 的 
动物 体 。 如 果 j f 4 的 Eun TE BS Wi 时 候 , SSR WF > 
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程序 中 添加 一 条 待 办 事项 ， 或 者 向 购 
物 车 中 加 入 一 件 商品 ， 这 个 时 候 就 可 以 使 用 动画 来 突出 正在 发 生 的 事情 。 侈 
如 ， 当 在 屏幕 中 创建 一 个 项 目的 时 候 ， 可 以 使 用 高 亮 的 效果 。 对 于 那 种 使 用 
很 多 Ajax 技术 的 应 用 来 说 ， 这 一 点 特别 有 用 。 在 这 些 情 况 下 ， 页 面 中 的 : 
FE 并 不 会 导致 页 面 的 刷新 ， 高 亮 的 部 分 弹出 来 告诉 用 户 发 生 了 什么 事 ' 
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Latest project activity 
Task Task closed - Make some coffee Change by dmitry_fadeyev, less than a minute ago 
Task. Task created - Make some coffee Change by dmitry fadeyev, less than a minute ago 
Note) Note created - Hello world! Change by dmitry_fadeyev, 1 minute ago 
‘Blog Blog post created - New project created Change by dmitry fadeyev, 1 minute ago 


Project Project created Change by dmitry_fadeyev, 1 minute ago 


Goplan 通过 在 面板 左 侧 放 置 不 同 颜色 的 标签 ， 来 帮助 用 户 快速 
比如 任务 、 笔 记 或 者 博客 文章 。 












































区 
M 


不 同 的 项 目 ， 













































































1.3.5 ”使 用 阴影 


另外 一 个 将 用 户 注 意 力 集中 到 某 一 区 域 的 方法 是 使 用 阴影 和 加 深 背 景 。 阴 影 
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通常 被 设置 在 弹出 菜单 或 者 模式 窗口 四 周 ， 像 一 张 毯子 一 样 遮 住 了 窗口 四 周 
的 干扰 元 素 。 阴 影 降 低 了 窗口 下 方 其 他 元 素 的 对 比 度 ， 反 过 来 就 增强 了 用 
各 用 区 域 的 对 比 度 。 同 样 可 以 在 窗口 底部 使 用 一 个 黑色 ( 或 亮 一 点 ) 的 半 透 
明 层 ， 减 少 它 所 覆盖 内 容 部 分 的 视觉 干扰 ， 从 而 让 用 户 的 注意 力 集中 在 窗 























































































































(c 














































































































L Show simple folder layout 
Advanced folders used by OS X, iLife and MobileMe will be hidden 


图 Keep a copy of sent emails when sharing files 
Shared file messages will be stored in Mail's Sent mailbox 


(cancer) I) 












































了 阴影 。 























zi 
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ral 
UT 


MobileMe 在 模 态 窗口 底部 使 用 了 黑色 的 庶 罩 层 ， 同 时 好 
借 此 消除 窗口 以 外 元 素 的 干扰 ， 把 用 户 注意 力 转 移 到 名 


1.3.6 ”强调 核心 的 动作 

应 用 程序 大 多 有 自己 特别 的 主要 和 次 要 界面 。 例 如 ， 当 你 在 一 个 项 目 管理 应 
程序 中 创建 项 目 时 ， 主 表单 通常 包含 项 目 名 称 、 项 目 截止 日 期 、 优 先 级 ， 
等 等 。 在 表单 底部 ,你 会 看 到 一 个 “ 创 
建 "按钮 。 通常 你 还 会 看 到 一 个 “取消 ” 
按钮 或 者 文本 的 链接 。 因 为 用 户 不 经 
常 使 用 ， 所 以 “取消 ”按钮 并 不 是 得 
重要 ， 因 此 ， 你 就 可 以 减少 这 个 按 和 
的 视觉 “分 量 "。 例 如 ,可 以 把 “创建 ” 
做 成 一 个 按钮 ， 而 “取消 ”只 做 一 个 "rp 
没有 任何 视觉 效果 的 超 链接 。 这 样 中 意 看 “Create client” ERAS "Cancer 
心 就 放 在 了 主要 的 操作 上 ， 完成 的 区 别 是 多 么 显著 
表单 的 时 候 就 能 很 快 地 定位 到 操作 按 
钮 。 
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1.3 制作 有 效用 户 界面 的 实用 技巧 众 妙 之 门 





1.3.7 ”使 用 块 状 链接 提高 效率 
使 用 带 填充 的 块 状 链接 可 以 用 来 方便 地 将 鼠标 定位 到 链接 。 网 络 应 用 程序 构 
£r HTML 元 素 的 基础 上 , 也 就 意味 会 使 用 很 多 的 锚 ( 通常 称 为 链接 ) 标签 。 
锚 标 签 默认 是 “内 联 (inline)” 元 素 ， yy 

意味 着 它 的 宽度 和 高 度 只 是 在 文本 M 
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Storage Settings 

































































TEES Mb oh oe SJ EB Persone into 
Í J ^ 部 o Rist 个 就 c JL , 可 以 AN = Use this page to allocate your MobileMe online storage. 
的 E " TT x 本 的 " " í = LJ Account Options: the remaining storage will be used by your iDisk. 
J BS 38 You Fs 1X k piling into EE R 
kE ` PA i > ab 4 NE & Password Settings iDisk 
+ 况 下 显得 太 / N JRA Ae 7 精 — Mail 















































准 、 和 舒服 地 进行 点 击 。 而 你 可 以 对 Oresmo | mm 


锚 链 接 使 用 内 边 距 来 使 它 变 大 。 对 000 
于 列表 中 的 链接 ， 就 像 侧 边栏 将 MobileMe 侧 边 的 号 航 面板 ， 使 用 了 带 内 


n 边 距 的 块 状 链接 增 大 了 可 点 击 区 域 ， 
He E = ES “g EU A " ü 2 : = : 
销 链接 转化 为 “ 块 元 素 ” 是 个 更 好 户 能 够 快速 地 移动 鼠标 到 这 些 区 域 ， 
的 办 法 。 通 过 使 用 CSS BY “display” 升 了 可 用 性 


属性 ， 我 们 可 以 转换 一 个 元 素 的 类 

型 ， 所 以 给 锚 链 接 增加 一 个 “block” 属 性 ， 就 能 将 其 转化 为 一 个 块 元 素 ， 块 
元 素 的 宽度 和 高 度 就 不 再 局 限于 文本 的 尺寸 ， 而 默认 会 扩展 到 包含 它 的 容器 
的 宽度 。 这 种 方法 非常 适合 侧 边栏 中 的 链接 。 


1.3.8 ”用 动词 作 标签 
在 使 用 应 用 程序 的 时 候 ， 总 是 准备 去 做 一 些 事情 ， 他 们 总 是 在 想 动 词 。 
“我 想 保存 这 个 文件 ”或 者 “我 想 更 新 这 篇 文章 "。 在 创建 对 话 框 或 者 其 他 需 
J 二， 使 用 动词 而 不 要 使 用 像 “ 是 的 "、“ 不 是 “好 的 ”这 
样 的 表述 。 当 用 户 看 到 像 “ 好 的 ”或 者 “取消 ”这 样 的 选项 时 ， 他 们 需要 去 
阅读 额外 的 信息 来 搞 明 和 白 他 们 要 做 什么 。 如 果 你 使 用 动词 ,例如 “保存 "不 
保存 ”和 “取消 "， 用 户 就 不 需要 他 的 消息 ， 他 们 马上 就 知道 这 个 对 
话 框 或 选项 是 做 什么 的 。 


















































































































































Fi 



































































































































































































































































































































































































































































































































































































































































































































Make this page public so anyone can see it? 
If you make your page public, anyone in the world can see it (but they can't make 
changes). Your page may also appear in search engines. 
















































































© Yes, make this page public so anyone in the world can see it Backpack 在 按钮 或 链接 很 好 1 也 
NR 运用 了 动词 ， 确 保 每 个 选择 关 














户 都 是 明白 无 误 的 。 








现代 网 络 应 用 中 的 用 户 界面 设计 





1.3.9 输入 时 自动 /重新 聚焦 


在 网 页 文件 加 载 完成 后 自动 激活 主 表 单 中 的 输入 框 会 给 基于 表单 的 应 用 带 来 
很 大 的 好 处 。 例 如 ，Google 的 搜索 引擎 页 面 自动 将 焦点 定位 在 页 面 的 输入 
框 中 ， 因 为 几乎 所 有 到 达 Google 首页 的 人 都 想 在 输入 框 中 键入 需要 查找 的 
内 容 。 在 其 他 的 应 用 环境 中 自动 激活 输入 框 也 非常 有 用 ， 例 如 ， 在 那 种 需要 
连续 输入 的 应 用 中 ， 就 像 创 建 购物 清单 ， 在 输入 第 一 个 物品 之 JARE 
着 输入 下 一 个 ， 所 以 可 以 重新 激活 输入 框 ， 让 用 户 快 速 、 持 续 地 进行 输入 。 


@ My Lists This list: Edit | Reorder | Share 


Some things | need to get done Tadalist 允许 你 快速 、 不 断 地 输入 待 


B Read today's RSS feeds 
















































































































































































































































































































































































































































































































































































B Write a book 办 事项 。 当 输入 一 个 任务 3 单 击 
E) Make a todo list [5] 4E As 程序 会 曾 加 个 新 条 3 

一 -< 然后 把 焦点 重新 定位 在 输入 框 中 ， 
+ Add this item ) Cio: 等 待 户 的 d 次 输入 。 





























1.3.10 ”使 用 悬浮 控件 进行 简化 和 解构 


很 多 应 用 程序 都 有 一 套 与 内 容 紧 密 相关 的 控件 ， 例 如 一 个 列表 中 的 删除 按 和 
和 记录 的 编辑 按钮 。 为 了 方便 定位 ， 通 常 这 些 控 件 放 在 了 每 条 记录 的 后 面 
1 
































































































































































































































































































































































































































































































































































































































































































































, 
但 是 这 种 情况 下 就 造成 了 大 量 的 重复 。 多 数 的 时 间 里 ， 用 户 并 不 需要 这 些 控 
牛 ， 需 要 时 ， 也 仅仅 需要 其 中 一 个 特定 条 目的 控件 。 
如 果 使 用 悬浮 控件 ， 可 以 在 将 鼠标 移动 到 一 个 特定 区 域 后 才 显 示 ， 这 样 
可 以 简化 界面 。 例 如 ， 当 鼠标 停 在 你 想 编 辑 的 记录 上 时 ， 一 个 编辑 按钮 就 会 
显现 出 来 ， 其 他 记录 的 编辑 按钮 仍然 保持 隐藏 
悬浮 控件 是 一 个 很 棒 的 解构 和 Attach files (each file should be under 100MB) 
简化 界面 的 方法 ， 但 是 在 使 用 “P Picture 12.png Remove 
这 个 方法 之 前 ， 你 还 需要 考虑 *& Picture 13.png Remove 
件 事情 。 首 先 考 虑 控件 是 否 se 
能 被 找到 。 用 户 在 使 用 之 前 ， 

Close 
往往 需要 先 找到 这 个 界面 ! 







































































元 素 。 你 的 控件 是 否 做 得 足够 ”Basecamp 运行 用 户 上 传 多 个 文件 ， 但 是 每 次 
显著 以 吸引 用 户 注意 ? 用 户 经 只 显示 一 个 文件 上 传 按钮 。 
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常 很 自然 地 移动 鼠标 ， 停 留 在 他 们 正在 浏览 的 项 目 上 ， 所 以 这 也 许 并 不 是 
个 大 问题 ， 但 是 仍然 值得 去 思考 。 其 次 ， 移 动 设 备 上 的 网 页 浏览 器 也 许 不 能 


模拟 鼠标 的 动作 ， 那 么 这 些 控件 将 无 法 使 用 。 


1.3.11 动态 扩展 表单 


如 果 表 单 中 的 一 个 输入 框 中 需要 输入 多 个 数据 记录 ， 例 如 ， 在 一 段 文本 之 后 
附加 多 个 文件 ， 或 者 向 数据 库 中 的 公司 记录 里 添加 多 个 人 员 信 息 。 这 种 1 


况 下 ， 可 以 使 用 动态 扩展 表单 ， 以 一 种 优 和 雅 的 方式 来 实现 需求 。 因 为 用 户 咎 
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ha x = HH Drawing Inspiration From Music - http://is.gd/ytQs 
作 ， 所 以 每 次 也 只 需要 显示 

































































E, 全 而 about 5 hours ago from twhirl 
AN tA x MZ > +8" i 8 Simple Free Photoshop Alternatives that are under 2 MB - wy 
输 A Eo 具 元 b http://is.gd/ysqw (by MakeUseOf) R 
about 5 hours ago from web 
=j a 
加 J FICK As 程序 会 任 新 k 














Is Information Visualization the Next Frontier for Design? - 


ELSE — Eh eee uh 

框 ， 允 许 用 户 键入 更 多 的 信息 

Sao Aap nA, Twitter 只 有 在 鼠标 停留 在 一 个 条 目 上 的 时 候 
X PA oj AN NE ZIN “u n “ Het 
pane TT 才 显示 “回复 ”和 “收藏 ”按钮 。 

空 输入 框 的 Zu. 每 次 你 只 需 


显示 一 个 空 的 输入 框 ， 但 是 允许 用 户 输入 需要 的 内 容 。 


1.3.12 ”输入 框 中 的 标签 


ru 你 想 要 砍 掉 一 些 不 必要 的 元 素 ， 
为 剩余 的 元 素 更 好 地 利用 空间 ， 将 标签 放 到 输入 框 内 部 是 一 个 巧妙 的 办 法 。 
c nca ep 
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mobile 


Log in to me.com 


BB Keep me logged in for two weeks For 


Not a Member? Learn more or sign up for a free trial. 

















mobileMe 将 标签 放 到 输入 框 内 部 ， 使 登录 界面 紧凑 而 有 致 。 




















or 
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1.3.13 上下文 敏感 的 界面 元 素 
如 果 希 望 为 高 级 用 户 整合 一 些 额外 的 功能 ， 但 是 又 不 想 让 页 面 腾 肿 ， 这 时 就 可 
以 通过 提供 按 需 增加 的 上 下 文 元 素来 实现 。 例 如 ， 你 的 应 用 中 有 一 个 带 高 级 搜 
索 的 搜索 条 ， 在 没有 使 用 的 时 候 只 显示 搜索 条 ， 当 用 户 单 击 时 再 显示 一 些 额 多 
的 控件 。 这 样 ， 界 面 仍然 保持 了 简洁 ， 实 现 高 级 的 功能 也 只 需要 一 次 点 击 。 
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aren't you? 用 户 将 鼠标 移动 到 搜索 条 上 时 ， 


会 显示 一 个 扩展 的 搜索 条 件 ， 为 
高 级 用 户 提供 一 些 额 外 的 功能 。 





} people who are passionate about sharing t 
ty video in the universe. See for yourself and Join today! 
d» Plus Sign up for Vimeo > -a 
zz] T 
1.3.14 图标 


NBER. ERE 























ni 

UT 
DS 
Su 























ail 
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吸引 力 ， 但 是 在 使 用 之 前 也 
些 因素 需要 好 好 考虑 。 语 言 几乎 总 是 比 图 标 表达 得 更 清楚 。 与 一 个 标签 非常 
容易 ， 只 要 表明 这 个 按钮 的 作用 就 行 。 然 而 在 设计 图 标的 时 候 ， 则 需要 用 
效 的 意象 来 描述 操作 。 如 果 图 标 是 一 些 很 本 土 化 的 东西 ， 你 选择 的 意象 在 不 
司 的 国家 可 能 会 有 不 同 的 理解 ( 甚至 连 垃圾 桶 的 形状 在 世界 各 地 都 是 不 同 的 )。 
屏幕 中 同时 没有 太 多 的 图 标 ， 每 个 图 标 都 能 够 同 其 他 图 标明 
样 图 标 才能 发 挥 出 最 好 的 作用 。 这 意味 着 形状 和 颜色 是 创建 一 套 成 功 图 标的 重 
要 因素 。 使 用 正确 的 图 标 ， 能 够 让 界面 更 容易 使 用 。 因 为 一 旦 用 户 熟悉 了 这 些 
到 标的 含义 ， 通 过 形状 和 颜色 的 区 别 ， 用 户 就 能 很 快 找 到 他 们 想 要 的 


1.3.45 ”使 用 加 载 指 示 器 
没有 人 喜欢 等 待 。 等 待 意味 着 本 来 可 以 做 一 些 有 价值 的 事情 的 时 间 里 ， 你 却 
什么 都 没有 做 。 入 每 个 程序 都 需要 花费 一 些 时 间 ， 比 如 导出 


个 大 文档 或 者 通过 查询 返回 结果 ， 用 户 不 得 不 等 待 。 但 是 ， 可 以 通过 使 用 
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加 载 指 示 器 来 让 用 户 觉得 等 待 的 时 间 变 短 了 。 在 加 载 过 程 中 ， 可 以 增加 一 
个 指示 器 ,比如 旋转 的 动画 或 者 进度 条 。 研 究 表 明 , 在 指示 器 存在 的 情况 下 ， 
户 感觉 等 待 时 间 变 短 了 。 加 载 指示 器 对 短 时 的 等 待 非常 适用 ， 但 是 对 了 



































































































































待 日 5 
个 需要 一 分 钟 其 至 更 多 时 间 的 情况 呢 ? 如 果 你 在 加 载 的 这 段 昌 








| 间 里 什么 都 



































1 http://www.usabilitypost.com/2009/01/23/maing-wait-times-feel-shorter/. 
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1.3 制作 有 效用 户 界面 的 实用 技巧 众 妙 之 门 











不 能 做 ( 假设 你 已 经 为 减少 加 载 时 间 做 了 最 大 的 努力 )， 你 还 是 可 以 做 一 些 
事情 来 改善 用 户 的 等 待 体验 。 利 用 这 段 时 间 提 供 娱 乐 或 者 信息 。 例 如 ， 很 多 



















































































































































































































































































应 用 程序 在 长 时 间 的 等 待 过 程 中 会 显示 一 些 有 趣 的 提示 或 技巧 。 如 果 用 户 太 
实 做 不 了 任何 工作 ， 起 码 他 们 可 以 学 到 一 些 新 东西 。 

Upload : 

Destination: My Dropbox __ Add more files... | 


UI Design.odt | | 16% Q Remove 


Having problems? Try the basic uploader. 210.7 KB/sec - 4 secs left 


















































当 用 户 通 过 Web 界面 上 传 文件 时 ，Dropbox 显示 一 个 进度 条 。 对 于 类 似 的 等 待 
时 间 不 定 的 事件 ， 进 度 条 是 必 不 可 少 的 ， 这 样 用 户 就 不 必 猜 测 他 们 究竟 还 要 等 
多 长 时 间 。 














































































































1.3.16 ”使 用 按钮 状态 提高 响应 性 
应 用 程序 的 响应 性 并 不 仅仅 依赖 于 后 全 代码 结构 的 优化 。 用 户 界 面 同 样 也 扮 
的 角色 。 在 可 视界 面 中 被 使 用 最 多 的 一 个 元 素 就 是 按钮 。 在 桌 
可 应 用 程序 中 ， 按 钮 具有 多 种 状态 ， 最 常见 的 是 按钮 默认 状态 和 鼠标 单 击 后 
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© Mark All as Read | @ Delete All | © Block Mailbox | £ Undo | 












































Getting started with Otherinbox May 10, 2009 Otherlnbox Team 

Update your newsletters and social networks May 10, 2009 Otherinbox Team 

How to get help May 10, 2009 Otherinbox Team 
OtherInbox 在 主导 航 系列 图 标 ， 图 标底 部 都 有 相应 的 文字 进行 说 明 。 















































( Search Pages ) 


k 


Search Pages 
attt 


WordPress 中 按钮 的 默认 状态 和 按 下 的 状态 。 
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现代 网 络 应 用 中 的 用 户 界面 设计 





NOM sese) Welcome to Campaign Monitor 
rr -—— ‘You're currenty in tne Manage Clents section of your account. To get you started, 
aay Post we've added Usability Post as the first cient youl be sending campaigns fo. You 
can add as many clients as you ike. 


nce: mandog compa er CER 
‘his page wil ist d he act across your © Create your first campaign 
account. 
































Campaign Monitor 在 初次 登录 的 时 候 提 供 了 详细 的 帮助 信息 ， 同 时 个 很 大 的 
按钮 } BH 到 活动 的 (our: ££ UL (lo 


按钮 按 下 的 状态 看 起 来 就 像 真 的 被 按 下 去 那样 。 这 个 状态 提示 用 户 ， 他 们 的 
单 击 已 经 成 功 地 执行 了 。 像 在 桌面 应 用 程序 一 样 ， 按 钮 的 按 下 状态 同样 可 以 
使 用 在 互联 网 应 用 中 ， 为 用 户 提供 一 些 额外 的 反馈 和 响应 。 


1.3.17 “帮助 性 的 空白 状态 

当 用 户 第 一 次 加 载 应 用 的 时 候 ， 屏 幕 上 不 会 显示 过 多 的 内 容 ;， 用 户 还 没有 输 
入 数据 ， 也 没有 什么 好 显示 的 。 在 这 个 空白 状态 中 添加 简短 的 帮助 信息 ， 来 
引导 用 户 如 何 开始 。 为 了 让 事情 更 加 简单 ， 你 甚至 可 以 在 信息 中 加 入 一 个 链 
接 ， 将 用 户 带 到 推荐 的 操作 。 例 如 ， 一 个 管理 电子 邮件 广告 的 程序 ， 用 户 创 
建 了 一 个 新 账户 后 登录 ， 应 该 提供 给 用 户 一 段 帮助 信息 ， 包含 一 个 链接 
到 创建 新 广告 的 界面 。 


1.3.18 ”宣传 应 用 的 特点 

户 对 你 的 应 用 并 不 是 十 分 了 解 ， 所 以 一 些 情况 下 在 应 用 中 合理 使 用 广告 是 
个 很 好 的 办 法 。 同 时 ， 由 于 互联 网 产品 经 常会 进行 一 些 细微 的 更 新 或 者 时 
不 时 推出 一 些 新 功能 ， 所 以 通过 广告 的 方式 让 你 的 用 户 知 道 这 些 变 更 就 变 得 
更 有 意义 。 一 般 情 况 下 ， 可 以 通过 在 屏幕 中 的 显著 位 置 放置 一 个 小 块 通知 的 
方式 来 实现 。 通 知 区 域 应 当 吸引 眼球 但 又 不 至 于 让 用 户 分 心 ， 影 响 用 户 的 正 
常 工作 。 用 户 读 了 这 个 通知 以 后 ， 应 该 可 以 关 掉 它 。 
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1.3 制作 有 效用 户 界面 的 实用 技巧 众 妙 之 门 


Attach fik 





Follow colleagues and join groups to receive their messages in this feed. x 


e , 


在 follow 特性 的 主要 输入 区 下 面 ，Yammer 网 站 提供 了 一 个 非常 有 帮助 的 提示 。 
户 读 完 以 后 ， 可 以 选择 点 击 右边 的 关闭 框 关闭 。 


1.3.19 ”撤消 操作 

桌面 应 用 程序 最 常用 的 特性 之 一 是 ， 值 得 信赖 的 撤消 快捷 键 。 不 小 心 改变 了 
正在 编辑 的 文档 图 表格 式 ? 没 问题 ， 按 Ctrl+z/cmd+Z 组 合 键 ， 应 用 程序 会 
采取 撤消 操作 ， 把 你 的 文档 恢复 到 最 后 一 个 动作 之 前 的 状态 。 撤 消 操作 是 容 
错 界面 的 一 个 重要 工具 ， 它 也 可 以 应 用 在 页 面 应 用 程序 中 。 例 如 ， 你 可 以 在 
网 页 应 用 程序 中 加 入 这 些 熟悉 的 快捷 键 或 者 显示 一 些 带 有 撤消 链接 的 临时 通 
知 信息 。 


The conversation has been moved to the Trash. Learn more Undo 
每 次 在 Gmail 中 删除 一 封 邮件 的 时 候 ， 都 会 出 现 撤 消 操作 的 按钮 ， 人 允许 我 们 马上 
敬 消 删除 操作 。 


Dmitry Fadeyev: Another message... 
4 months ago C3 ij zx reply 









































































































































































































































































































































































































































































































































1.3.20 还原 操作 

人 们 在 删除 一 些 东 西 之 后 ， 通 常会 反悔 ， 所 以 在 你 的 应 用 程序 里 增加 额外 的 
保护 措施 来 处 理 一 些 比较 重要 的 数据 是 一 个 明智 的 做 法 。 例 如 ， 项 目 管 
的 项 目 文件 。 用 户 删除 一 个 项 目 时 ， 将 其 进行 存档 而 不 是 立即 删除 。 如 果 用 
改变 主意 ， 希 望 把 他 们 需要 的 项 目 文件 取 回 时 ， 程 序 可 以 轻松 地 将 它们 
原 。 当 用 户 发 现 所 有 的 东西 并 没有 丢失 非常 高 兴 时 ， 消 耗 一 点 用 户 的 
磁盘 空间 是 值得 的 。 
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现代 网 络 应 用 中 的 用 户 界面 设计 


You have deleted this writeboard: 


"Very important notes" 


An email has been sent to example@email.com with a link to recover 
this writeboard. The recovery link will work for 2 months, after which 
the writeboard will be permanently deleted. 
































Writeboard 人 允许 用 户 恢 复 两 个 月 内 被 删除 的 文档 。 




















1.3.24 确认 对 话 框 
当 在 应 用 程序 中 进行 诸如 删除 记录 这 样 的 破坏 性 操作 时 ， 提 供 一 个 确认 对 话 
框 ， 提 醒 用 户 是 否 确实 要 进行 接 下 来 的 操作 是 非常 必要 的 。 特 别 是 当 删 除 按 
钮 的 位 置 和 其 他 控件 非常 近 的 时 候 。 如 果 用 户 不 小 心 点 击 了 删除 按钮 ， 在 生 
效 之 前 用 户 可 以 取消 操作 。 但 是 ， 不 要 过 度 使 用 这 个 特性 ， 因 为 不 必要 对 话 
框 拉 长 了 操作 过 程 并 让 人 生 厌 。 









































































































































































































































































































































B Your Recent Entries 


http:/ /usabilitypost.letsfreckle.com 
Do you really want to delete the selected entry? 


D ED 






































Freckle 使 用 确认 对 话 框 来 确保 用 户 的 误 操 作 不 会 造成 更 大 的 损失 。 





























14 结论 


本 哲学 家 Kaizen ( 中 译音 为 “改善 ”) 强调 ， 应 该 通过 微小 、 逐 渐 的 过 程 
来 获得 持续 的 改进 和 提高 。 看 设计 ， 特 别 是 现代 网 络 应 用 的 用 户 界 面 
设计 , 并 不 需要 一 个 完成 的 状态 ， 因 为 我 们 总 是 不 断 地 对 其 进行 改善 和 升级 。 


记 住 ， 你 也 应 该 像 Kaizen 一 样 思 考 。 


传统 的 CD 的 分 发 模式 有 一 个 很 大 的 缺点 ， 即 一 旦 产品 烧 录 完成 并 寄 送 出 去 
后 ， 你 就 无 法 改变 它 …… 或 者 ， 不 是 那么 容易 改变 。 你 可 以 发 布 一 个 补丁 ， 
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众 妙 之 门 


















































但 是 用 户 必须 下 载 并 安装 它 才 能 生效 ， 你 无 法 确保 每 个 人 都 会 进行 更 新 。 另 
外 ， 为 每 一 个 细微 的 改变 发 布 补丁 是 不 可 行 的 ， 所 以 你 必须 在 第 一 次 发 布 的 
时 候 尽量 做 到 完美 ， 而 这 就 需要 在 发 布 之 前 进行 大 量 的 测试 。SAAS ( 软件 即 
服务 ) 的 模式 改变 了 一 切 。 通 过 网 络 运行 你 的 网 络 应 用 的 好 处 是 ， 你 可 以 随 
时 进行 微小 的 更 改 ， 而 用 户 马 上 就 能 够 实现 这 些 改 进 。 


这 就 意味 着 ， 现 在 不 必 在 第 一 次 发 布 之 前 将 界面 做 到 10096 正确 。 如 果 一 些 
东西 不 合适 ， 你 可 以 修改 它 。 通 过 观察 用 户 与 界面 之 间 的 互动 ， 你 就 能 找到 
让 界面 工作 得 更 好 的 感觉 ， 也 能 发 现 使 用 时 的 冲突 。 不 管 是 哪 一 部 分 的 用 
界面 需要 改进 ， 你 可 以 很 容易 地 为 所 有 用 户 进行 更 新 。 这 就 是 Kaizen HAE 
设计 方法 : 微小 的 、 逐 渐 的 、 常 规 的 改进 。 你 不 再 需要 担心 必须 在 第 一 次 就 
将 界面 做 到 完美 。 相 反 ， 通 过 不 断 地 改进 ， 你 将 很 快 获得 从 实际 使 用 中 进化 
而 来 的 伟大 界面 。 
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Jacob Gube Kayla Knight 











CSS 布局 的 艺术 和 科学 






































在 现代 网 页 设计 中 , 网 站 布局 设计 工作 需要 耐心 、 细 致 以 及 扎实 的 CSS 知识 。 
设计 元 素 决定 了 整体 设计 的 视觉 流向 和 层次 结构 ， 同 时 页 面 布局 构建 了 整个 
网 站 的 骨架 ， 为 页 面 中 的 元 素 提供 了 呼吸 和 生存 的 空间 结构 。 但 是 设计 网 页 
布局 确实 非常 复杂 耗 时 ， 设 计 师 的 耐心 在 面 对 各 种 浏览 器 之 间 的 不 兼容 以 及 
多 种 风格 和 样式 之 间 的 利弊 权衡 过 程 中 一 点 点 被 侵蚀。 
了 消息 : 已 经 有 一 些 实用 的 指导 可 以 帮助 我 们 有 效 、 可 控 地 完成 页 面 布局 。 本 篇 文章 将 
会 介绍 多 种 类 型 的 布局 ， 并 且 分 别 介绍 它们 的 优点 和 缺点 ， 以 及 在 何 种 情况 下 使 用 最 好 。 
同时 ， 为 了 从 总 体 上 更 好 地 理解 CSS 布局 ， 我 们 还 会 涉及 一 些 主要 技术 和 相关 话题 。 


探寻 建立 一 个 完美 、 普 适 布局 的 过 程 最 后 都 归结 为 对 现存 的 各 种 方法 的 比较 ， 
这 个 过 程 还 会 极 大 地 受到 设计 师 的 技能 ， 以 及 在 像素 级 、 自 适应 、 灵 活性 布 
局 间 选 择 的 影响 。 基 本 上 ， 设 计 师 有 4 种 可 选择 的 布局 类 型 : 固定 宽度 布局 、 
适应 布局 、 弹 性 布局 和 混合 布局 。 这 些 布局 的 名 字 暗 示 了 它们 是 否 能 够 根 
据 用 户 浏览 器 的 尺寸 调查 自身 的 尺寸 。 


2.4 固定 宽度 布局 


司 定 宽度 的 布局 ， 就 像 它 的 名 字 一 样 ， 这 是 一 种 以 像素 为 单位 ， 宽 度 固定 的 静 
态 布局 。 这 类 布局 的 外 层 宽度 都 是 固定 的 ， 内 部 使 用 了 百分比 或 者 固定 的 宽度 。 
设计 师 对 内 容 区 域 周 围 的 设计 元 素 就 有 了 更 大 的 控制 力 ， 并 且 人 能够 更 精确 地 设 
计 内 容 和 导航 的 宽度 。 设 计 师 根据 自己 的 经 验 和 探索 ， 可 以 对 页 面 中 的 字体 、 
和 平 稀 关 系 做 更 精确 的 规划 。 固 定 宽度 的 设计 可 以 确保 所 有 设计 中 的 平衡 
关系 能 够 始终 如 一 ， 不 管用 户 使 用 什么 样 的 浏览 器 ， 这 种 平衡 永远 不 会 被 打破 。 
司 定 宽度 布局 正 是 由 于 其 简洁 、 直 观 、 易 于 实现 和 定制 的 特性 ， 成 为 了 一 种 
非常 流行 的 选择 。 使 用 固定 宽度 布局 ， 我 们 可 以 确保 在 不 同 分 辩 率 下 设计 效 
果 保 持 一 致 。 我 们 不 用 去 猜测 用 户 使 用 什么 客户 端 ， 测 试 也 变 得 简单 ， 从 而 
总 体 上 缩短 了 开发 时 间 。 特 别 是 固定 宽度 布局 使 用 绝对 的 像素 值 ， 这 比 相对 
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众 妙 之 门 








































































































单位 的 百分比 或 者 em ( 基于 字体 大 小 ) 更 能 让 设计 师 感 到 舒服 和 直观 。 严 
格 按照 像素 来 定位 内 容 区 域 也 许 就 是 固定 宽度 布局 最 为 显著 的 特点 。 
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V G Colourpivel: Web D. 


hello, | am Nag, a Designe] 
from Hyderabad, India 
good in web, print, 
identity, branding & 
user interface design. jo 
contact. Qe 
offerings. 


v | websites. 
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Colourpixel 的 首页 就 使 用 了 950 像素 的 
BY 1045 像素 宽度 时 的 效果 。 






































































































































































































































































































































































































































司 定 宽度 布局 所 用 的 宽度 往往 由 显示 器 的 平均 分 辩 率 决定 。 当 下 ， 大 多 数 
户 都 已 经 拥有 了 1024x768 或 更 高 分 辩 率 的 显示 器 ， 所 以 大 多 数 设 计 师 选择 
了 使 用 960 或 者 1050 像素 ( px ) 作为 固定 宽度 布局 的 宽度 。 这 个 宽度 可 以 
避免 水 平 滚动 条 的 出 现 ， 并 2 e 都 会 出 现 的 20 像素 的 垂直 滚 
动 条 留 下 了 充足 的 空间 。 但 是 ， 对 于 低 分 辩 率 的 屏幕 ， 我 们 需要 多 加 注意 ， 
如 果 固 定 宽度 布局 的 宽度 过 宽 ， 则 会 出 现 水 平 的 滚动 条 。 













































































司 定 宽度 布局 的 一 个 优势 在 于 设计 要 素 易 于 定位 ， 结 果 容 易 预测 。 确 定 了 布局 
的 宽度 ， 定 位 元 素 就 不 会 秆 另外 ， 即 使 一 个 网 站 设计 师 考虑 兼容 最 小 的 
800 X 600 像素 分 辨 率 显示 器 ， 在 高 分 辨 率 的 情况 下 ， 内 容 区 域 仍 会 清晰 可 状 。 那 
些 从 平面 设计 领域 转行 到 基于 网 页 的 设计 领域 的 设计 师 趋 向 于 选择 固定 宽度 布 
局 ， 因 为 他 们 热衷 于 精确 的 控制 ， 毕 竟 在 传统 的 印刷 设计 中 普遍 采用 绝对 定位 的 
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CSS 布局 的 ERF 





€ > C sr hitpy/wmw.colourpixalcom/ > Gr sy 








: Bo ‘ee 
ihe © 2 hello, | am Nag, a Designer 
phe, P from Hyderabad, India 
SsCOLOURPIXEL. good in web, print, 
©] here&there. identity, branding & 

a user interface design. g$? 

contact. Ge 
offerings. 










































































sj —^r NsezET S4 ARX RAVI: 浏览 器 的 分 辨 率 为 1680 像素 ， 这 时 布局 的 
右 侧 显示 了 大 量 的 空白 。 
司 定 宽度 布局 的 缺点 是 没有 充分 利用 用 户 显示 器 的 全 部 显示 区 域 。 当 然 ， 屏 



















































































幕 的 分 状 率 不 一 定 会 和 浏览 器 的 分 辩 率 相同 ， 因 为 很 多 “宽屏 ”不 会 最 大 
如 果 用 户 有 一 个 很 大 的 宽屏 显示 器 ( 例如 ， 分 辩 率 














































































































































































































































































































































































































































































































1900 X 1200 像素 ， 浏 览 嚣 分辨 率 1500 像素 )， 屏 幕 中 很 大 一 部 分 没有 被 使 
的 假设 就 比较 合理 了 。 例 如 ， 浏 览 一 个 750 像素 宽 的 固定 布局 ， 空 向 区 其 

的 水 平 宽度 会 和 布局 一 样 宽 。 

羽 此 ， 固 定 宽 度 布局 产生 了 过 度 的 空白 ， 扰 乱 了 黄金 比例 、 总 体 

平衡 或 者 其 他 的 设计 原则 。 那 些 顺畅 的 纹理 、 图 案 和 连续 的 图 片 也 需要 适应 

高 分 辩 率 的 情况 。 最 后 ， 强 烈 推 荐 使 用 一 个 居中 的 DIV RAPE ee 
的 平衡 感 。 

















wrapper { margin:0 auto; } 
这 上段 代码 可 以 实现 这 个 效果 。 如 果 不 这 么 做 ， 在 那些 拥有 高 分 辩 率 显示 器 的 
户 看 来 ， 整 个 布局 会 藏 在 左上 的 角落 里 。 








































































































































































































如 何 确 定 什么 尺寸 是 最 合适 的 昵 ? 许 多 用 户 有 了 很 大 的 宽屏 显示 器 ， 





















































高 分 辩 率 的 显示 器 带 来 了 屏幕 分 辨 率 的 提升 , 但 是 用 户 趋 于 避免 使 用 全 屏 模式 。 在 很 多 情况 下 , 用 户 的 浏览 器 保持 了 
各 种 各 样 的 尺寸 , 同时 旁边 还 运行 着 其 他 的 应 用 程序 (比如 Twitter 应 用 、Rss 阅 读 器 或 者 即时 通信 工具 ) 。 参 见 “50.4% 


of respondents maximize windows" (456bereastreet.com) 。 
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众 妙 之 门 






































但 是 更 多 的 人 还 在 使 用 普通 尺寸 的 显示 器 ， 还 有 一 些 仍 在 使 用 低 分 辨 率 显示 
器 。 不 管 是 哪 种 情况 ， 多 数 用 户 都 会 将 窗口 调整 到 他 们 喜欢 的 尺寸 ， 而 不 是 
使 用 最 大 化 的 、 标 准 的 或 者 和 屏幕 分 辩 率 成 比例 的 窗口 大 小 。 

在 实践 中 ， 为 网 3 找 一 个 最 佳 的 平衡 点 通常 需要 对 网 
资料 进行 深入 的 研究 。 通 常 的 做 法 是 评定 访问 者 的 浏览 偏好 ， 然 后 相应 地 
整 设计 。 最 常用 的 方法 是 分 析 网 站 的 统计 数据 ， 找 到 使 用 最 多 的 分 辨 率 ，3 
分 析 有 多 少 用户 使 用 较 低 的 分 辨 率 。 根 据 通常 的 经 验 ， 可 以 将 宽度 设置 在 
80071000 像素 之 间 。 作 为 专业 人 士 ， 我 们 必须 为 用 户 而 不 是 我 们 自己 创建 
合适 的 布局 ， 即 使 我 们 的 设计 在 高 分 辨 率 的 宽屏 笔记 本 上 看 起 来 很 糟糕 。 
~、 面 我 们 就 来 创建 一 个 简单 的 两 栏 的 固定 宽度 布局 。 这 个 布局 有 一 个 放 
Logo 的 标题 区 域 、 主 导航 以 及 一 个 实现 额外 信息 的 底部 区 域 。HTML 代码 如 


T7R 6 
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nl 
IT 
i 


«div id="container"> 
«div id="header"> 
<!-- logo, navigation --> 
«/div» 
«div id="content"> 
«!-- main content --> 
«/div» 
«div id="sidebar"> 
<!-- sidebar --> 
</div> 


<div id="footer"> 































































































<!-- site information --> 

</div> 
</div> 
为 了 固定 宽度 ， 在 Hcontainer 层 上 设置 width ( 宽度 ) 属性 ， 同 时 为 左右 两 
栏 设置 固定 宽度 。 为 了 让 头 部 和 底部 与 容器 等 宽 ， 设 置 宽度 为 100% ( 尽管 
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CSS 布局 的 SAA 




















在 大 多 数 的 时 
不 必要 的 ， 但 这 是 一 个 很 好 
的 习惯 ， 可 以 确保 这 两 个 区 
域 确实 与 容器 
本 例 中 使 用 了 float 属性 来 
LEA MAL A Mh : 
7 ( 当然 ， 我 们 也 可 以 使 用 相 ne 

对 或 者 绝对 定位 ) 同时 使 用 24ways 网 站 使 用 了 固定 宽度 布局 。#content 层 
clear 属性 确保 底部 显示 在 两 个 ”的 宽度 固定 为 900 像素 。 

栏目 下 方 。 另 外 ， 你 还 需要 在 

也 类 型 的 浏览 器 上 进行 测试 ， 确 保 布局 能 够 在 不 同 的 浏览 器 上 正常 显示 。 


了 | 
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container { 

margin: 0 auto; /* Centering the layout horizontally */ 
width: 960px; 

j 

fheader { 

width: 100$; 

j 

#content { 

width: 600px; 

float: left; 


display: inline; /* IE 5/6 Doubled Float-Margin Bug 消除 IE5/6 中 
的 浮动 元 素 边 距 加 倍 的 pug */ 


j 








sidebar { 
width: 330px; 
/* 960px - 600px - 330px - 30px is used to separate columns */ 


float: right; 





display: inline; /* IE 5/6 Doubled Float-Margin Bug */ 





2.2 自 适 应 布局 


H 
#footer { 
width: 100%; 


clear: both; 


















































众 妙 之 门 
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先 择 固定 宽度 布局 还 是 其 他 类 型 的 布局 ， 其 实 是 一 个 设计 师 愿 意 给 用 户 多 少 
的 问题 。 前 者 把 设计 的 决策 交 给 了 设计 师 而 不 是 用 户 ; 后 者 则 人 允许 

根据 喜好 调整 字体 、 图 片 以 及 列 宽 。 































/ D Fixed Width Layout ... 
€ C x file:///D:/demos/layout-type-fixed-width-layout.html 


Header Area (#header) 











Site Information (#footer). 














个 固定 宽度 布局 的 例子 。 










































































对 于 固定 宽度 布局 ， 人 们 普遍 认为 ， 从 长 远 看 来 ， 其 代码 维护 困难 。 如 果 
























































设计 中 使 用 了 固定 尺寸 的 字体 ( 尽管 IE6 的 用 户 完全 不 能 改变 文字 的 




















RT}, 












































天 客户 要 求 加 大 某 些 特定 的 设 ; 


元 素 的 尺寸 ( 例如 文本 )， 重 新 计算 
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之 间 的 比例 关系 来 决定 设计 的 尺寸 ( 
绍 的 灵活 布局 ( 自 适应 布局 和 弹性 布局 )。 


2.2 自 适 应 布局 



























































































































































例如 使 用 相对 值 )， 这 就 是 接 下 来 要 介 





有 灵活 变动 宽度 特性 的 布局 ， 也 被 称 为 流 式 布局 ， 这 种 布局 会 根据 网 页 浏 














































































































的 宽度 以 当前 浏览 器 的 窗 





e 
K 











览 器 的 窗口 大 小 相应 地 调整 自己 的 宽度 。 在 这 类 布局 中 ， 容 器 中 的 主体 部 分 
度 为 基准 ， 按 照 一 定 的 百分比 进行 定义 。 当 浏 




































































































































































































































































































































































































































































览 器 的 尺寸 发 生变 化 时 ， 布 局 也 发 生变 化 ， 因 为 用 户 调整 窗口 的 操作 已 经 改 

变 了 布局 所 依赖 的 基准 。 换 句 话 说 ， 这 类 布局 中 各 区 域 的 宽度 会 随 着 用 户 浏 

览 器 窗口 的 调整 自动 变化 。 所 以 ， 如 果 用 户 觉 得 正在 浏览 的 文章 的 行 宽 不 是 

很 合适 ， 通 过 简单 地 调整 窗口 尺寸 ， 内 容 区 域 就 会 自动 进行 调整 。 

这 类 布局 中 ， 布 局 元 素 之 间 的 关系 至 关 重 要 ， 因 为 布局 中 子 元 素 的 宽度 是 以 

父 元 素 的 百分比 设置 的 ( 不 是 相 邻 的 元 素 )。 例 如 ， 如 果 布 局 容器 的 宽度 设 
为 90% ( 他 的 父 元 素 为 浏览 器 窗口 )， 导 航 区 的 宽度 设置 为 80%， 那 么 号 














































































































航 区 的 宽度 就 是 浏览 器 宽度 的 72% (1X0.9X0.8=0.72 )。 由 此 可 见 ， 设 计 流 
式 布局 需要 对 设计 的 结构 有 深度 的 了 解 。 对 设计 师 而 言 ， 过 程 也 许 痛苦 ，1 
是 成 功 的 设计 会 让 网 站 更 加 灵活 地 面 对 使 用 不 同 终 端的 用 户 。 






































































































































































































































流 式 布局 能 够 尽 可 能 多 地 使 用 浏览 器 的 可 用 空间 ， 设 计 师 可 以 有 足够 的 空间 
来 平均 排 布 页 面 中 的 内 容 。 设 计 得 当 的 布局 可 以 保持 空白 区 域 始 终 一 致 
管 浏览 器 或 者 屏幕 的 分 辩 率 如 何 变化 ， 这 样 的 设计 显得 更 加 一 致 并且 对 用 户 
友 布 


了 了。 同时， 这 类 布局 也 消除 了 低 分 辩 率 显示 器 上 刺眼 的 水 平 滚 动 条 。 

































































































































































了 











M. 
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H 








定 宽 度 布局 不 同 ， 流 式 布局 赋予 用 户 更 大 的 来 调整 布局 的 宽度 . 






















































































和 固定 宽度 布局 不 同 ， 流 式 布 局 赋予 用 户 更 大 的 来 调整 布局 的 宽度 。 伴 
MARR ， 设 计 师 将 严格 、 一 致 的 像素 布局 转移 到 一 种 更 加 灵活 ( 也 医 
风险 ) 的 环境 中 来 。 这 时 对 网 站 中 特定 元 素 之 间 比 例 关 系 的 定义 变 得 
和 困难 。 这 也 正 是 多 数 设计 师 避 免 使 用 流 式 布局 的 原因 ， 这 种 布局 
计 师 在 像素 级 精度 上 预测 定位 元 素 的 能 力 。 
设计 师 在 用 相对 值 蔡 代 绝对 值 的 过 程 中 , 经 常 将 这 些 值 进位 或 者 去 位 ( 例如 ， 
将 15.43333% 变 成 15.4396 或 者 15% )， 这 样 设计 就 变 得 更 加 不 精确 。 最 后 

计 也 许 在 一 些 低 分 辩 率 屏幕 上 表现 良好 ，1 案情 况 下 会 发 生 
怪 的 现象 ， 诸 如 布局 中 显著 的 空白 、 内 容 区 太 宽 难以 阅读 等 。 
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J 结果 是 流 式 布 局 最 显著 的 缺点 。 由 于 内 容 区 的 宽度 取 
视窗 的 大 小 ， 宽 屏 的 用 户 会 发 现 每 一 行 都 是 如 此 的 长 ， 以 至 于 阅读 
更 用 流 式 布 局 的 页 没有 这 么 多 的 文字 ， 用 户 将 

看 到 孤零零 的 一 行 字 ， 侧 边栏 高 得 非常 不 协调 ， 周 边 还 充斥 着 大 量 的 空白 。 









































































































































































































































uH] 






































1 当然 , 很 多 终端 用 户 并 不 知道 他 们 可 以 通过 调整 浏览 器 尺寸 来 调整 行 宽 , 但 这 是 另外 一 个 话题 了 。 
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2.2 自 适 应 布局 众 妙 之 门 



















































































为 了 获得 最 佳 的 阅读 效果 ( 每 行 47 到 86 个 英文 字母 )， 设 计 师 通常 为 内 容 
区 #content-block 设置 在 此 基础 上 加 1096 的 宽度 。 除 非 设计 的 可 读 性 会 在 低 
分 辩 率 情况 下 变 得 很 糟糕 ， 一 般 不 会 设置 最 小 宽度 。 

在 css 中， 使 用 CSS 属性 “max-width” 来 定义 布局 的 最 大 宽度 。 几 乎 所 有 
的 主流 浏览 器 都 支持 这 个 属性 (IE 7+、Firefox 1+、Safari 2+、Opera 9.2+ ), 
245% IE 除外 。 

为 解决 这 个 问题 ， 设 计 师 通常 会 在 内 容 区 域 设 置 一 个 最 大 宽度 ， 以 此 来 将 布局 限制 到 


一 个 较为 理想 的 宽度 。 


但 是 ， 仍 有 一 个 变通 的 解决 方法 。 注 意 ， 在 IE8.0 版 本 中 ，IE 不 再 支持 微 
软 的 动态 属性 (MSDN IE Blog “Ending Expressions”)， 即 CSS 表达 式 。 所 以 
IE6 中 的 错误 修正 并 不 会 在 更 高 版 本 的 IE 中 产生 副作用 。 动 态 样式 属性 允 
许 我 们 使 用 类 做 JavaScript 中 的 结构 控制 和 数学 计算 的 语法 ， 网 页 开发 人 员 
Svend Tofte 在 一 篇 如 和 何 解决 上 浏览 器 中 最 大 宽度 问题 的 文章 中 有 所 讨论 。 
根据 文章 中 的 示例 ， 我 们 可 以 限制 #content-block 的 宽度 ( svendtofte.com )。 




























































































































































































































































































































































































































































































































































































了 


#content { 
max-width: 30em; 
width: expression ( 
document .body.clientWidth > (500/12) * 
parseInt (document .body.currentStyle.fontSize) ? 


"30em': 
"auto" ); 


} 

代码 检查 用 户 相 对 浏览 器 宽度 的 字体 尺寸 设置 ( 以 pt 为 单位 )o Tofte AA, 
不 管 在 什么 情况 下 ， 默认 12pt 的 字体 时 ，500px ( 像素 ) 要 比 30em 宽 ， 
所 以 上 面 的 代码 中 使 用 了 30em 作为 布局 的 宽度 。 
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1 当然 , 这 也 取决 于 设计 师 为 容器 选择 合适 的 宽度 值 或 者 使 用 特殊 数值 来 计算 布局 元 素 宽度 的 能 力 。 根据 W3C 的 规 
范 , 在 CSS 中 使 用 实际 数值 (例如 82.345% ) 是 可 以 的 , 但 是 不 能 确保 在 所 有 浏览 器 中 被 取 整 , 这 也 是 为 什么 大 家 更 喜欢 
整数 值 的 原因 。 
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CSS 布局 的 ERF 










































































原理 是 ， 如 果 内 容 部 分 的 宽度 大 于 500 像素 与 12 的 比值 乘 以 用 户 字体 的 设置 ， 
就 将 宽度 设置 为 30em。 相 反 的 情况 下 ， 让 宽度 保持 自动 ( 使 用 “auto” BME). 
于 动态 样式 属性 没有 包含 在 W3C 的 CSS2 规范 中 ， 使 用 这 种 方法 会 让 样式 
表 无 法 通过 验证 。 读 者 可 以 根据 自身 情况 使 用 ， 能 够 为 市 场 上 仍然 是 最 流行 
的 浏览 器 提供 带 有 最 小 宽度 和 最 大 宽度 的 流 式 布局 ， 付 出 这 点 代价 也 许 是 筑 
不 足 道 的 
Clearleft 网 站 就 是 使 用 了 自 适 应 宽度 布局 的 例子 。 下 面 两 幅 图 展示 了 网 站 在 
1280 和 800 像素 情况 下 的 表现 。 注 意 看 内 容 区 域 是 如 何 自动 调整 “We make 
websites better” 这 人 句 话 的 ， 在 1280 像素 时 的 两 行 变 成 了 800 像素 时 的 三 行 。 
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mene: mail capsa 一 





We make 
websites 
better 


We create sites that are etme sons” 
elegant, engaging 
and easy to use. 


We make 
websites better 


We create sites that are elegant, engagi 


We have Big Agency skills but small age 
able to remember all our names. 


We can work with you. We are Clearleft. 


Work with us or learn from us aan 
Web design & consultancy 
E a We take a user-centered design approach, which means you'll make more money from your 
L c website than if you go to an agency that adopts a more traditional approach. Here's why: 











(Qj We make more than “just a pretty site” Why not pop by for a chat about how we can work 
with you to improve the experience your customers 


最 后 ， 我 们 使 用 上 面 固定 宽度 布局 的 HTML 结构 来 实现 一 个 简单 、 纯 粹 的 两 栏 
适应 布局 。 再 次 提醒 ， 记 得 使 用 多 种 浏览 器 来 验证 结果 是 否 跨 浏 览 圳 兼容。 
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#container { 
margin: 0 auto; 
width: 75$; 

j 

#header { 


width: 100%; 
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2.2 自 适 应 布局 


j 

#content { 
width: 60$; 
float: left; 


display: inline; /* IE 5/6 Doubled Float-Margin Bug */ 





j 

#sidebar { 
width: 40$; 
float: right; 


display: inline; /* IE 5/6 Doubled Float-Margin Bug */ 





H 
#footer { 
width:100$; 


clear:both; 





| (Le) (+ O fieJ]ICIBook Smashing 208ook/ demos/ayout-tyoe fuid-width-ayout html € | (Q- Googe o n e- (s 





Header Area (#header) 








viewed at 1280px 









al> | [+ @ fies//c:100k/ Smashing %20800k/demos/tayout-type Rud-wi © | [Q 6009 


Header Area (#header) 





















众 妙 之 门 
























































Site information (footer). viewed at 800px 
| 
上 图 为 一 个 自 适应 布局 的 示例 ， 容 器 的 宽度 设置 为 窗口 的 75%， 并 且 分 别 ; 















































1280 和 800 像素 的 环境 下 进行 了 测试 。 





CSS 布局 的 艺术 和 科学 








ME 


为 自 适应 布局 选择 一 个 合适 的 宽度 时 ， 使 用 “width : auto” 或 者 其 他 的 
分 比值 会 非常 合理 ， 这 样 确保 了 布局 自动 占据 浏览 器 的 可 用 空间 。 对 于 最 
Da 








































































































































































































度 ， 可 以 使 用 像素 值 ， 例 如 760 ( 像素 )。 这 个 限制 确保 了 所 有 自 适应 
















































































即使 在 最 低 的 分 辩 率 情况 下 仍 保持 可 读 。 至 于 最 大 宽度 ， 通 常 的 做 法 是 
使 用 em 值 ( 例如 90em )， 这 样 就 能 在 文本 宽度 不 失控 的 情况 下 ， 保 持 不 同 
准 率 情况 下 的 稳定 。 让 人 高 兴 的 是 ， 如 果 用 户 调整 浏览 器 的 字体 设 
大 宽度 会 发 生 相应 的 变化 。 


个 经 典 的 计算 这 个 比例 的 方法 是 ， 通 过 将 给 定 像素 高 度 元 素 与 容器 的 尺寸 相 除 得 到 
的 字体 大 小 ( 即 上 下 文 )。 
































































































































































































































































































































在 实现 自 适应 布局 时 ， 我 们 使 用 了 相对 值 来 表示 外 边 距 和 内 边 距 ( 当时 ， 是 
对 于 视 口 的 宽度 ), 这 样 当 窗 口 尺 寸 变 化 时 ,外 边 距 和 内 边 距 同样 发 生变 化 ， 
时 保持 了 比例 和 尺 、 灵活 。 这 种 技术 被 称 为 “concertina padding", 
Richard Rutter 提 出 (“Web Standards Group : Ten Questions for Richard 
Rutter” , webstandardsgroup.org )。 使 用 这 种 技术 后 ， 当 页 面 尺寸 改变 时 ， 
外 边 距 和 内 边 距 同样 发 生变 化 ， 同 时 会 检查 内 容 区 以 及 文本 行 的 长 度 。 


2.3 ”动态 网 格 布局 


网 格 设计 体现 了 秩序 和 精确 。 本 质 上 ， 网 格 人 允许 使 用 对 齐 、 对 称 、 适 当 的 空 
， 从 战略 和 系统 上 来 组 织 排 版 和 设计 元 素 。 最 终 实 现 令 人 愉悦 和 易 读 的 设 
计 。 网 格 布局 可 以 在 多 种 布局 类 型 基础 上 实现 ， 但 是 设计 师 们 通常 认为 弹性 
的 布局 要 难得 多 ， 无 法 与 传统 的 网 格 体系 相提并论 。 但 是 本 章 中 ， 这 并 不 是 
必要 的 。 


本 质 上 ， 通 过 合理 地 使 用 DIV 层 、 百 分 比 和 一 些 简单 的 数学 运算 就 可 以 创 
建 一 个 自 适 应 网 格 布局 。 这 个 想法 最 早 是 由 Ethan Marcotte 适应 网 格 ， 
alistapart.com ) 提出 的 , 他 认识 到 “如 果 我 们 不 把 字体 尺寸 仅仅 认为 是 像素 ， 
而 是 测量 它们 容器 的 一 个 属性 ， 我 们 就 可 以 将 网 格 布 局 中 所 有 的 元 素 都 这 样 
来 测量 。” 他 的 基本 意思 就 是 使 用 相对 单位 、 百 分 比 和 一 个 简单 的 除法 运算 ， 
来 找到 替代 固定 布局 设计 中 像素 宽度 的 方法 。 因 为 em 单位 只 是 与 内 容 有 关 ， 
布局 中 的 其 他 元 素 也 可 以 这 样 对 待 。Ethan 指出 , “这 种 方法 允许 将 基于 像素 
的 固定 宽度 布局 转换 为 基于 百分比 的 布局 ， 同 时 在 缩放 时 保持 各 个 网 格 之 间 
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2.3 动态 网 格 布局 众 妙 之 门 





的 关系 。 


WAR SRS SR. KARL, MAR 
各 和 系统 上 来 组 织 排版 和 设计 元 素 。 


个 经 典 的 计算 这 个 比例 关系 的 方法 是 ， 通 过 将 给 定 像素 高 度 元 素 与 容器 的 
尺寸 相 除 得 到 字体 大 小 ( 即 上 下 文 )。 最 后 ,我 们 得 到 了 期 望 的 使 用 相对 值 的 、 
类 似 em 或 百分比 的 比例 关系 。 这 个 公式 就 是 : 目标 + 环境 = 结果。 


如 果 我 们 将 这 个 公式 应 用 到 设计 中 ， 就 可 以 得 到 一 个 稳定 的 自 适应 布局 。1 
是 ， 我 们 实际 上 是 希望 得 到 网 格 布局 ， 所 以 接 下 来 我 们 要 创建 一 个 总 宽 为 
988 像素 ， 等 分 为 7 个 124 像素 宽 、 之 间 有 20 像素 分 割 的 固定 宽度 布局 。 

假设 现在 布局 中 有 一 个 700 像素 宽 的 <h1> TR ( 横 跨 了 5 列 和 4 SAB: 


5X 124 像素 +4X20 像素 =700 像素 )。 这 个 元 素 应 该 为 块 状元 素 并 且 在 布局 
中 居中 ( 也 就 是 具有 288 像素 的 外 边 距 ， 左 右 各 144 像素 )。 


为 了 计算 <h1> 的 相对 单位 ， 将 700 像素 ( 目标 ) 与 988 像素 ( 内 容 ) 相 除 ， 
得 到 700 + 988=0.7085。 也 就 是 70.85% ， 我 们 可 以 修改 样式 表 为 。 

















Bu 


更 用 对 齐 、 对 称 、 适 当 的 留 白 ， 从 策 

























































































































































































































































































































































































































































































































































































hi { 


width: 70.85%; /* 700px / 988px = 0.7085 */ 















































同时 ， 对 于 外 边 距 需要 小 心地 处 理 ， 期 望 的 左边 距 是 144 像素 ( 目标 )， 
次 使 用 公式 来 计算 相对 宽度 . 144 二 988=0.14575， 相 对 宽度 就 是 14.575%， 
最 后 代码 如 下 所 示 。 






















































































hi { 
margin-left: 14.575%; /* 144px / 988px = 0.14575 */ 


width: 70.85%; /* 700px / 988px = 0.7085 */ 





































































































































































































j 

将 这 种 方法 应 用 到 布局 中 的 所 有 元 素 上 ， 我 们 将 会 得 到 一 个 稳定 、 灵 活 、 自 
适应 的 网 格 布局 。 这 是 一 种 非常 简单 的 概念 ， 但 是 在 流 式 设计 中 带 来 高 效 的 
处 理 比例 平衡 的 方法 。 有 了 这 种 技术 ， 设 计 师 就 不 能 再 抱怨 维护 比例 是 如 何 






















































































困难 或 者 是 怎样 破坏 他 们 布局 的 美感 了 。 
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CSS 布局 的 艺术 和 科学 


Information Content 
124px 844px 





























一 个 简单 的 网 格 布局 ， 只 有 一 个 标题 区 域 、 信 息 区 域 和 一 块 很 大 的 内 容 区 。 




































































设计 师 可 以 用 不 同 的 方式 定义 元 素 之 间 的 边 距 值 ， 其 中 一 个 就 是 计算 边 距 的 
相对 比例 ( 在 本 例 中 ,20 像素 + 880 像素 ),。 另 外 一 个 就 是 固定 边 距 ,在 本 例 中 ， 
我 们 就 设置 为 20 像素 。 
每 种 方法 都 有 其 优点 和 缺点 。 使 用 相对 的 边 距 值 ， 虽 然 能 够 达到 较 好 的 平衡 

列 ， 但 是 设计 师 就 会 承担 在 宽屏 上 边 距 过 大 的 风险 。 固 定 边 距 虽然 在 边 距 
上 有 一 点 不 完美 ， 却 确保 了 在 不 同 浏览 器 尺寸 情况 下 一 致 的 外 观 。 


2.4 自 适应 的 流 式 布 局 


尽管 流 式 设计 可 以 适应 很 多 种 不 同 的 分 辨 率 ， 但 是 仍 有 一 个 通病 ， 在 分 辨 率 
KIR ( 比如 手机 或 者 PDA 设备 ) 或 者 太 高 的 情况 下 ,界面 看 起 来 就 有 点 可 笑 。 
列 如 ， 一 个 三 栏 布局 的 页 面 在 只 有 240 像素 的 PDA 屏幕 中 看 起 来 就 会 非常 
糟糕 。 另 外 ,如 果 设 置 了 “最 小 宽度 ” ,布局 中 可 能 会 包含 一 个 水 平 的 深 动 条 ， 
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这 让 阅读 变 得 很 不 流畅 。 
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为 了 解决 这 个 问题 ， 可 以 使 项 技术 来 改善 不 同 屏幕 分 辩 率 情况 下 的 内 容 
适应 问题 ， 这 也 就 是 “适应 性 流 式 布局 ”名 称 的 由 来 。 接 下 来 ， 我 们 将 创 


建 在 640 到 800 像素 ，320 到 640 像素 ，240 到 320， 以 及 240 像素 以 下 分 
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24 自 适应 的 流 式 布局 众 妙 之 门 



































TN. 


辨 率 情 况 下 只 是 稍 有 不 同 的 定制 布局 。 同 样 ， 定 制 的 调整 也 能 够 分 别 用 
800 到 1024 像素 ，1024 到 1280， 甚 至 1280 像素 以 上 的 情况 。 


这 样 做 的 好 处 是 显而易见 的 ， 设 计 师 在 能 够 切换 不 同 布局 分 辨 率 的 同时 又 保 
寺 了 布局 的 准确 。 无 论 是 最 低 分 辨 率 还 是 最 高 分 辨 率 ， 都 能 够 乱 
同时 保留 了 空间 平衡 的 设计 准则 ， 而 不 用 担心 用 户 使 用 何 种 浏览 器 。 


要 建立 这 种 类 型 的 布局 ， 需 要 准备 两 件 事 。 为 每 种 范围 的 分 辩 率 准备 分 离 的 
样式 文件 和 一 种 获取 用 户 屏幕 分 辨 率 的 方法 。 第 一 件 事情 就 是 创建 一 些 列 可 
替换 的 布局 文件 。 例 如 ， 一 个 文件 命名 为 narrow.css， 在 非常 低 的 分 辨 率 情 
况 下 使 用 。 另 外 一 个 命名 为 normal.css, AIBA HER’ 
个 命名 为 wide.css， 专 门 应 付 那 些 高 分 辩 率 的 情况 。 

这 样 做 的 好 处 是 显而易见 的 ， 设 计 师 在 能 够 切换 不 同 布 局 分 辨 率 的 同 
的 准确 。 


了 这 些 样式 文件 ， 我 们 就 可 以 使 用 JavaScript 来 做 一 些 简 单 的 替换 。 例 如 ， 
使 用 Kevin Hale 的 “动态 布局 技术 ( Dynamic Resolution-Dependent Layout 
Technique )” (particletree.com) 或 者 Marac Van Den Dobblesteen 的 “Switchy 
McLayout” ( alistapart.com )。 所 有 样式 文件 的 声明 和 JavaScript 脚本 放 在 所 
页 面 文件 的 头 部 。 
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况 ~、 使 jo 第 三 


























































































































才 又 保持 了 布局 
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<!-- Narrow style sheet --> 


«link rel="alternate stylesheet" type="text/css" href="css/ 





narrow.css" title="narrow" /> 


<!-- Default style sheet --> 


<link rel="stylesheet" type="text/css" href="css/normal.css" 


title="default" /> 


<!-- Wide style sheet --> 





<link rel="alternate stylesheet" type="text/css" href="css/ 


wide.css" title="wide" /> 
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CSS 布局 的 艺术 和 





<!-- Included JavaScript to switch style sheets --> 
«script src-"scripts/dynamiclayout.js" type-"text/ 
javascript"></script> 
JER, “narrow”. “default” FU "wide" iX 3 个 外 部 样式 文件 链接 中 的 属性 。 
认真 看 一 下 源码 中 DynamicLayout ( ) 函数 就 能 发 现 ， 可 以 很 容易 地 根据 样 
式 表 链接 的 属性 进行 样式 文件 的 切换 。 下 面 来 看 看 具体 的 例子 。 
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function dynamicLayout () { 

var browserWidth = getBrowserWidth(); 
// Narrow CSS rules 

if (browserWidth « 640) 

changeLayout ("narrow") 

j 

// Normal (default) CSS rules 

if ((browserWidth >= 640) && (browserWidth <= 960))) 
changeLayout ("default"); 

j 

// Wide CSS rules 

if (browserWidth > 960) { 


changeLayout ("wide") ; 

















注意 ， 因 为 适应 性 的 流 式 布 局 依赖 Javascript， 所 以 需要 客户 端 支持 JavaS- 
cript， 这 样 脚本 才能 探测 用 户 浏览 器 的 分 辨 率 ， 并 且 进 行 相应 的 切换 。 
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24 自 适应 的 流 式 布局 





LX yer haer HON RN 
Oce x EXE 203 














Adaptive Layout 


Date: 12 May 2006 
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Adaptive Layout 











是 Switchy McLayout 77 
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在 不 同 浏览 器 尺寸 下 的 
列 。 根 据 浏览 器 的 尺寸 ， 










































































布局 进行 了 自动 的 调整 。 











“支持 变量 的 固定 宽度 布局 ”( Variable fixed-width layout ) 是 由 Richard Rut- 
ter 开发 的 ， 基 于 Simon Collison 布局 的 相似 技术 ( Æ “Redesign Notes 1 : 































































































Width-Based Layout” 中 进行 过 讨论 ，colly.com )。 屏 幕 尺 寸 发 生变 化 时 ， 布 






































器 的 村 , 布 局 会 随 之 变化 义 适 应 新 Ro 





Richard Rutter 的 基于 变量 的 车 








局 和 字体 也 相应 地 变化 。 布 局 尺寸 实时 地 发 生变 化 ， 所 以 如 果 你 调整 了 浏览 
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第 四 栏 移动 到 了 所 
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就 像 之 前 提 到 的 那样 ， 流 式 布 局 的 一 个 普遍 问题 是 文本 要 么 变 得 和 
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被 挤 到 一 团 导 致 布 局 的 可 读 性 很 差 。 在 窒 屏 幕 中 ， 文 本 之 间 过 大 的 空白 
最 大 的 问题 ， 当 然 相 反 的 极端 情况 也 同样 让 用 户 很 头疼 。 可 以 使 用 最 大 
和 最 小 宽度 来 解决 这 个 问题 ， 但 是 这 样 的 话 ， 布 局 就 被 转换 为 宽度 部 分 
Wk, RAT SAA RIA. Tinned Fruits 的 文本 缩放 技术 ( tinnedfruit. 
com ) 基于 JavaScript， 根 据 用 户 浏览 器 的 宽度 自动 调整 文本 的 尺寸 。 当 所 
TaN, FAREA. WR, MATERN, FARN PI, TURER 
大 和 最 小 的 字体 尺寸 防止 奇怪 的 情况 发 生 。 更 进一步 ， 设 计 师 甚至 可 以 决定 
哪些 元 素 受到 文本 缩放 的 影响 ， 哪 些 元 素 免 受 影响 。 


我 们 可 以 向 网 页 中 添加 基于 JavaScript 的 字体 缩放 。 在 页 面 中 插入 下 面 的 代 
码 ， 根 据 情 况 进行 适当 修改 。 
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«script type="text/javascript"> 
var contentZoom - new TextZoom( 
"Content", // Reference element 
"Content", // Target element 
0.22, // Zoom ratio 
70, // Minimum font size (%) 


130); // Maximum font size (%) 





addLoadEvent (textZoomInit); 


«/script» 





Text Zooming 


Example Navigation Doesnt Resize 


Sizing text with the browser window 


Resize this window. If you have javascript turned on, the text si 
and navigation will not. 


Here's a simple DOM scripting technique for sizing text content : 
element, or any other element for that matter, including the doc: 


* maintain a (relatively) consistent reading line length in conte 
* design a zoom layout that sizes text according to the viewpc 
* maintain more control over content layout for varying viewpc 


Features include: 


















































* honours relative browser text size preferences 字体 缩放 技 < - Ae ^E L 最 大 
* minimum and maximum sizes to stop things getting silly A 
* no additional markup or CSS R 村 的 DIH], wr 示 较 大 的 f 体 。 
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Text Zooming 


Example Navigation Doesn't Resize 








Sizing text with the browser window 





Resize this window. If you have javascript turned on, the text size in this 
column should resize. The header and navigation will not. 








Here's a simple DOM scripting technique for sizing text content depending on 
the width of its containing element, or any other element for that matter, 
including the document body. This is useful if you want to: 


e maintain a (relatively) consistent reading line length in content columns 字体 缩放 技 JN i g 和 E Z] 一 样 的 页 


* design a zoom layout that sizes text according to the viewport window 











































































































rep i 
e maintain more control over content layout for varying viewport sizes Hl, 宽度 调整 于 700 ZA o J 体 
Features include: 随 着 浏览 器 变化 进行 J 了 调整 。 请 
si zc B SARIS ARE 
honours relative browser text size preferences TEARS ELT EA e j 体 YZ A 
e minimum and maximum sizes to stop things getting silly i 
e no additional markup or CSS Æ 变化 o 





在 Soh Tanaka AY X. & "Smart Columns with CSS and JQuery” ( sohtanaka.com ) 
， 作 者 提出 了 一 种 类 似 的 技术 。 为 了 获得 最 好 的 浏览 体验 ， 通 过 脚本 来 修 
A DIV 的 宽度 ， 同 时 根据 浏览 器 当前 的 尺寸 决定 显示 列 数 的 多 少 ( 根据 浏览 
器 尺寸 的 变化 )。 使 用 JQuery 脚本 清除 所 有 列 的 多 余 空白 ， 然 后 平均 分 配给 
现 有 的 列 。 这 项 技术 是 自 适应 流 式 布局 的 一 个 好 例子 ， 特 别 适用 于 那些 对 浏 
览 器 不 是 一 视 同仁 ， 而 是 自己 调整 浏览 器 尺寸 的 用 户 。 
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当 浏 览 流 式 布 局 的 网 站 时 ， 内 容 区 可 能 变 得 太 宽 而 降低 了 可 读 性 。 为 了 提高 
可 读 性 ， 设 计 师 党 试 通过 CSS 的 属性 来 限制 布局 的 最 大 宽度 。 弹 性 布局 ( 或 者 
称 为 可 缩放 ) 布局 采用 了 完全 不 同 的 方法 来 实现 相同 的 效果 。 这 种 布局 的 基本 
思想 是 根据 用 户 的 字体 大 小 而 不 是 浏览 器 视 口 大 小 来 调整 网 页 布局 的 宽度 。 


上 无 法 缩放 的 一 个 点 ，em 则 是 字体 的 一 个 方形 单位 。 根 
据 用 户 对 于 字体 尺寸 的 选择 ，em 单位 经 常 发 生变 化 ( Elastic Design, ali- 
stapart.com )。 相 应 的 ， 设 计 师 使 用 em 单位 ， 与 弗 雷 元 素 尺寸 相关 的 
对 单位 来 表示 字体 的 大 小 。 通 过 为 布局 中 的 区 块 和 字体 使 用 em 单位 ， 设 
计 师 能 够 实现 网 页 布局 的 整体 缩放 ， 保 持 内 容 区 每 行 的 宽度 适中 ， 实 现 接近 
现实 的 缩放 效果 。 最 后 ， 当 用 户 增加 字体 尺寸 时 ， 布 局 自动 缩放 ， 就 像 它们 
一 个 有 弹性 的 物体 一 样 。 
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于 不 依赖 于 浏览 器 视 口 的 变化 ， 弹 性 布局 有 点 类 似 于 固定 宽度 布局 ， 同 时 
备 了 它 的 优点 和 缺点 。 设 置 很 大 的 字体 尺寸 会 扩展 布局 的 宽度 和 高 度 ， 最 



































































































































































































































































































































百 布 局 变 得 无 法 使 用 和 阅读 。 但 是 ， 这 种 情况 极 少 发 生 ， 因 为 很 少 有 人 会 把 
字体 放大 3 È ( 特别 是 设计 师 已 经 使 用 了 一 个 足够 大 的 字体 作为 基准 字体 )。 
像 弹 性 布局 一 样 ， 这 种 布局 开始 时 最 困难 的 一 件 事 情 就 是 计算 合适 的 em 值 。 





































































































为 了 简化 从 像素 ( px ) 到 em 的 转化 ， 可 以 设置 body 中 10 像素 的 字体 基准 
尺寸 为 0.625em 或 者 62.5% ( 多 数 浏览 器 中 字体 的 尺寸 是 16 像素 ，10 像素 
是 16 像素 的 62.5% )， 这 样 在 计算 字体 的 子 元 素 的 时 候 更 容易 些 。 例 如 ， 设 
页 面 主体 部 分 字体 尺寸 为 0.625em ， 那 么 一 个 960 像素 宽 的 DIV 就 是 96em。 


这 些 元 素 的 存在 增加 了 弹性 布局 的 复杂 性 ， 因 为 在 字体 的 尺寸 发 生变 化 时 ， 
需要 维护 布局 中 所 有 元 素 的 比例 关系 。 在 一 些 情况 下 ， 弹 性 布局 允许 所 有 元 
素 随 着 字体 的 增加 而 变化 ， 也 就 是 说 ， 图 片 也 会 因为 用 户 设置 的 不 同 ， 跟 着 
布局 的 变化 放大 或 者 缩小 。 


当然 ， 这 可 以 通过 为 图 片 赋予 类 似 <img width= “80%” height= “80%” /> 的 

比 单位 值 来 解决 。 但 是 记 住 , 低 分 辨 率 的 图 片 放大 后 会 极 大 地 降低 质量 
浏览 器 进行 的 是 “模拟 ”放大 ， 片 模糊 并 出 现 窍 形 块 。 另 外 ， 浏 览 呈 
会 从 服务 器 加 载 整 个 ( 大 ) 图 片 ， 进行 缩放 ， 增 加 了 服务 器 的 负载 ， 提 
高 了 页 面 的 加 载 时 间 。 因 此 ， 多 数 设计 师 经 常 为 图 片 使 用 绝对 值 。 
关于 弹性 布局 ， 或 者 基于 字体 尺寸 设置 宽度 的 布局 ， 人 们 还 非常 关心 如 何 展示 多 媒 
内 容 ， 诸 如 图 片 和 Flash 对 象 ， 
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ft Harvey Kane Bj "Automatic Magazine Layout” ( alistapart.com ) 一 文中 提 
到 的 另外 一 个 解决 方案 需要 用 到 一 些 数学 和 PHP。 文 章 标题 取决 于 杂志 
zi EE 如 何 被 5 n : 永远 ! 美的 布 局 和 组 织 。 下 面 的 PHP 代码 。 
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include the class file 


require once( 'magazinelayout.class.php' ); 








Define the width for the output area (pixels) 





1 16 像 素 是 一 个 多 数 浏览 器 默认 的 字体 大 小 , 但 是 很 多 人 会 将 电脑 中 的 dpi 从 120 调 整 到 96, 这 就 会 让 系统 中 所 有 的 字 
体 看 起 来 都 比较 大 。 
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$width = 600; 


# Define padding around each image; this *must* be included 


# in your style sheet (pixels) 


Spadding = 3; 


# Define your template for outputting images 





# (Don’ t forget to escape the &) 


Stemplate = ‘<img src-"image.php?size-[size]&file- [image]" 





alt-"Screenshot" />'; 


# create a new instance of the class 


$mag = new magazinelayout ($width,$padding,$template); 


# Add the images in any order 


Smag->addImage( ‘landscapel.jpg' ); 


Smag->addImage( ‘portraitl.jpg' ); 


Smag->addImage( 'landscape2.jpg' ); 


# display the output 
echo Smag->getHtml () ; 
我 们 可 以 预先 定义 整个 杂志 设计 布局 需要 使 用 的 宽度 。 因 此 ， 如 果 能 够 决定 
户 浏览 器 的 宽度 ， 我 们 就 能 够 计算 出 图 片 布局 应 该 有 多 宽 。 这 当然 不 难 实 
现 ， 因 为 在 我 们 的 第 二 个 技术 : 自 适应 的 流 式 布 局 中 使 用 过 。 在 这 段 代码 中 ， 
Kevin Hale 使 用 了 一 个 getBrowserWiath ( ) 的 函数 。 感 兴趣 的 读者 可 以 看 
看 他 的 文章 ， 增 加 对 这 个 方法 的 理解 。 


如 果 能 够 使 用 这 个 方法 获取 到 用 户 浏览 器 的 宽度 数值 ， 我 们 就 能 根据 这 个 数 
值 找到 内 容 区 域 应 该 设置 的 像素 值 ( 或 者 用 来 存放 图 片 的 区 域 的 宽度 )。 假 
设 我 们 希望 放置 图 片 的 内 容 区 设置 为 70% 宽 。 我 们 只 需要 通过 简单 的 数学 
运算 ， 来 得 到 浏览 器 宽 的 7096 是 多 少 像素 ( px Jo 
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像素 宽度 = 内 容 区 的 百分比 X 浏览 器 宽度 。 








Swidth=0.70XgetBrowserWidth () ; 

当然 ， 这 个 计算 很 简单 ， 也 是 流 式 布局 中 处 理 图 片 的 简单 方法 。 在 PHP Bl 
本 运行 后 ， 调 整 脚本 来 自动 找到 图 片 的 像素 宽度 ， 这 样 就 方便 地 为 流 式 布 
中 的 图 片 或 者 其 他 固定 宽度 的 元 素 设置 宽度 。 

弹性 布局 的 最 大 优点 就 是 具备 始终 保持 设计 元 素 比例 关系 的 能 力 ， 以 及 确保 
可 读 性 和 定位 准确 。 弹 性 布局 是 那些 希望 在 流 式 布局 和 固定 宽度 布局 之 间 受 
协 的 设计 师 的 首选 。 流 式 布局 和 固定 宽度 布局 的 优点 在 弹性 布局 中 都 有 所 体 
现 。 但 是 ， 这 种 布局 实现 起 来 非常 困难 ， 在 完成 之 前 需要 大 量 的 深入 理解 和 
测试 。 


现在 ， 我们 继续 使 用 前 面 用 过 的 HTML 结构 来 实现 一 个 简单 的 两 栏 布 
So WMR lem 相当 于 16 像素， 那么 960 像素 就 是 60em。 左 边 600 像素 
是 37.5em， 右 侧 360 像素 是 22.5em。 为 了 方便 使 用 ， 下面 是 计算 公式 : 
lem 二 16 像素 X ( 像素 宽度 ) =em 单位 。 
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#container { 





width: 60em; 
j 

width: 37.5em; 

float: left; 

display: inline; /* IE 5/6 Doubled Float-Margin Bug */ 
j 


#rightCol { 
width: 22.5em; 


float: right; 


Xj 


display: inline; /* IE 5/6 Doubled Float-Margin Bug */ 





H 
footer { 


width: 60em; 
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clear: both; 


A > C fe///C BookSmasmne%208o0k/ óemet/ayout type eR wT Aout hem o eS ES 1779783] ® s 


Header Area (#header) 










+ PIE 
fie:///C:/Bool/ Smashing 20800k/ emos/ayout-type-ebstic-rnth-ayovt- html Qe Geog © Do- + 
Header Area (#header) 
"Im x AE) 
A > KM fiel/C/ look Smashing 20Book demow/ayout-type-<laste-weth-ayout homi GICS e ro (e 


Header Area (#header 
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不 同 字 体 尺 寸 下 的 弹性 布局 截图 ， 随 着 字体 的 增 大 ， 布 局 的 宽度 也 相应 增加 了 。 








































































































设计 社区 中 在 热烈 地 讨论 灵活 布局 的 生命 力 。 下 一 代 浏 览 器 ， 诸 如 Firefox 
3+、Opera 9.5 + 和 IE 7+ 都 带 来 了 一 项 似乎 会 减轻 网 站 开发 人 员工 作 的 特 
性 一 一 全 页 面 缩放 ( Full page zoom )。 
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站 中 字体 的 尺寸 ,浏览 器 现在 支持 用 户 自然 地 缩放 布局 ， 

布局 片 和 背景 。 整 个 页 面 设计 都 会 根据 选择 进行 等 比例 缩放 。 同 
时 ， 所 有 的 固定 宽度 布局 也 变 成 了 “可 变化 的 "。 布 局 中 始终 包含 内 容 的 区 
域 也 支持 这 个 特性 。 这 样 ， 就 不 会 出 现在 上 一 代 网 络 浏览 器 中 经 常 出 现 的 盒 
模型 看 加 的 现象 。 直 观 地 讲 ， 这 项 技术 将 会 导致 弹性 布局 的 荒废 和 消亡 ， 医 
为 他 们 达到 了 需要 css 代码 才能 实现 的 同样 的 效果 。 


然而 ， 事 实 并 非 如 此 。 正 如 Zoe Mickley Gillenwater 所 指出 的 (“为 什么 浏览 
器 不 能 杀 死 弹性 布局 "，zomigi.com )。 如 果 为 用 户 提供 一 个 带 页 面 缩放 的 臣 










































































不 仅 是 简单 地 
ape 
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定 宽 度 布 局 ， 用 户 看 到 每 行 的 字数 会 与 设想 的 不 一 致 ( 例如 ， 一 些 用 户 因 为 
视力 的 原因 会 选择 大 一 点 的 字体 )。 
在 固定 宽度 布局 的 页 面 中 ， 可 变 的 字体 尺寸 使 内 容 的 显示 变 得 难以 预测 ， 同 
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LET 
q 
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时 也 很 难保 留 设 计 中 的 比例 和 平衡 。 另 外 ， 当 页 面 放大 ( 或 者 缩 / 
些 情 况 下 并 不 会 放大 Logo 或 者 图 标 。 换 句 话说 ， 这 种 布局 允许 用 户 只 缩放 
司 定 的 区 域 或 者 元 素 ， 这 在 浏览 器 缩放 中 是 无 法 实现 的 。 当 然 ， 基 于 像素 布 
局 的 所 有 缺点 仍然 存在 ， 包 括 水 平 滚动 条 和 过 多 的 空白 。 最 后 ， 全 页 面 缩放 
对 满足 不 同 用 户 需 求 有 所 帮助 ， 但 却 不 是 开发 人 员 的 终极 解决 方案 。 


2.6 混合 布局 


现实 中 ， 设 计 师 通常 混合 使 用 固定 宽度 、 流 式 布 局 或 者 弹性 布局 元 素 ， 为 用 
户 提供 每 种 方式 的 优点 ， 并 且 将 缺点 降低 到 最 小 。 
列 如 ， 内 容 区 域 通常 会 使 用 em 单位 ( 以 此 来 确保 每 行 的 适当 长 度 以 及 在 
IE6 下 的 字体 缩放 )。 侧 边栏 通常 使 用 固定 单位 ( 因为 侧 边栏 通常 会 包含 固定 
宽度 的 Banner， 这 样 固定 宽度 才 比 较 可 行 )。 另 外 一 个 相关 的 技术 是 为 流 式 

而 不 是 弹性 元 素 ， 
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内 容 指 定 “ 最 小 宽度 ”和 “最 大 宽度 ”属性 。 使 用 CSS | 
让 用 户 可 以 根据 个 人 喜好 调整 每 行 的 长 度 。 
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Jello-liquid 布局 虽然 不 是 很 流行 ， 但 却 比 较 有 趣 (“Jello : A Different Liquid 
Layout", uwmike.com )。 为 了 保持 内 容 区 的 可 读 性 ， 他 努力 降低 布局 增长 时 
比例 增长 的 速度 。 所 以 , 一 个 自 适 应 布局 在 1024 x 768 ( 960 + 1024=0.9375 ) 
视 L4 960 像素 宽度 ， 在 窗口 增长 到 1440 x 900 ( 1440 + 1350=0.9375 ) 
时 会 得 到 一 个 比 1350 像素 小 的 宽度 。 为 了 实现 这 种 效果 ， 布 局 中 很 大 一 部 
分 元 素 都 使 用 了 固定 的 像素 值 , 剩 下 的 元 素 使 用 了 与 窗口 宽度 相关 的 相对 值 。 
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司 定 部 分 占 布局 的 比例 越 小 ， 布 局 随 着 窗口 拉 伸 时 所 获得 效果 就 越 好 。 很 简单 、 也 很 
另外 一 个 有 趣 的 方法 是 结合 了 流 式 和 弹性 元 素 的 流 式 弹性 布局 ( fluid elastic 
layout )。 这 种 布局 基于 em 单位 ,但 是 使 对 值 设 置 了 “最 小 宽度 ”和 “最 
ARE” 考虑 了 窗口 的 宽度 ， 赋 予 用 户 将 布局 限制 在 一 定 缩放 范围 内 的 能 
力 )。 通 过 设置 最 大 和 最 小 宽度 ， 文 本 缩放 到 一 定 程 度 的 时 候 会 停止 变化 。 





























































































































布局 随 着 窗口 的 变化 而 自动 调整 保留 了 适应 性 ， 同 时 也 是 弹性 的 。 在 窗口 尺 
寸 或 者 字体 尺寸 发 生变 化 时 ， 各 列 的 宽度 在 自动 变化 。 
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在 下 面 的 例子 中 ， 为 容器 和 每 一 列 设 置 了 “max-width” 属 性 。 这 样 布 局 就 会 限 
制 在 整个 视 口 的 宽度 。 同 样 ， 在 较 老 版 本 的 IE 中 并 不 支持 “maxwidth ， 所 以 


我 们 需要 为 |E 做 一 些 特 殊 的 处 理 , 代码 如 下 所 示 ( 在 下 一 个 例子 中 将 不 再 列 出 e 











































































































#container { 
width: 60em; 
max-width: 100%; 

j 

#header { 
background-color: #cccccc; 

width: 60em; 
max-width:100$; 
} 
#leftCol { 
width:37.5em; 


float:left; 
E 5/6 Doubled Float-Margin Bug */ 





display: inline; /* Il 


max-width:62.5$; 
} 
#rightCol { 
width: 22.5em; 
float:right; 
max-width:37.5$; 

} 

#footer { 
width:60em; 
max-width:100$; 

clear:both; 


} 
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2.7 ” 哪 种 布局 最 适合 您 的 网 站 ? 


定 宽度 的 方法 通常 在 种 有 大 量 图 片 的 高 级 视觉 布局 中 表现 良好 ( 例如 娱乐 、 
足 销 或 者 基于 Flash 的 网 站 ， 还 有 一 些 作品 集 页 面 )， 这 样 图 片 能 够 通过 精 而 
的 定位 实现 更 加 准确 、 较 少 错误 的 设计 。 实 现 这 种 布局 ， 设 计 

的 平均 情况 ， 确 保 设计 的 布局 对 大 部 分 用 户 不 会 显得 太 窒 或 者 太 宽 ， 在 不 
司 浏览 器 间 保 持 良好 的 可 用 性 。 编 写 国定 布局 同样 比较 规 
员 不 需要 为 各 种 元 素 之 间 的 关系 和 平衡 耗费 太 多 心思 。 
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对 于 哪 种 布局 最 合适 不 会 得 到 标准 答案 。 限 于 使 用 环境 \ 时 间 限 制 以 及 设计 师 的 技能 ， 
的 


每 种 布局 都 有 特定 区 
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如 果 这 正 是 你 的 想法 ， 也 许 你 会 考虑 在 设计 中 使 用 流 式 布局 。 这 种 布局 制作 
非常 耗 时 , 也 不 是 很 容易 开发 , 并 且 在 一 些 不 可 预知 的 环境 中 存在 一 定 风 险 ， 
但 是 提供 了 用 户 根据 喜好 调整 布局 的 特性 。 流 式 布 局 具有 较 高 的 生产 成 本 ， 
但 是 显著 降低 了 维护 成 本 , 同时 为 灵活 性 和 跨 分 辩 率 的 网 站 提供 坚实 的 基础 。 
设计 师 只 需要 确认 内 容 区 具有 合适 的 行 宽 ， 并 且 在 必要 的 情况 下 使 用 “min- 
width” #0 “Max-width” o 
ADESSO 弹性 或 者 部 分 弹性 的 设计 是 另外 一 个 选择 。 在 正确 使 
的 前 提 下 ， 弹 性 布局 在 带 来 了 更 多 可 预测 性 的 同时 保持 了 布局 的 灵活 性 。 医 
为 弹性 布局 依赖 于 字体 大 小 ( 而 不 是 浏览 器 的 窗口 尺寸 )， 弹 性 布局 允许 设 
计 师 “冻结 ”布局 中 区 块 间 的 比例 ， 确 保 元 素 之 间 的 平衡 和 良好 的 可 读 性 。 
特别 是 在 文本 较 多 的 网 站 中 ， 保 持 良 好 的 可 读 性 的 要 求 非常 严格 ( 固定 布局 
中 也 一 样 重 要 )。 弹 性 布局 更 多 的 是 用 在 杂志 、 在 线 商店 、 博 客 或 者 类 似 的 
网 站 上 。 聪 明 的 流 式 网 格 使 用 者 可 以 创建 既 忠 实 于 原始 设计 比例 和 经 典 图 片 
设计 原则 ， 又 保持 适应 性 的 布局 

一 些 设计 师 希 望 在 不 同 浏览 器 之 问 获得 完美 的 一 致 ， 流 式 设计 的 支持 者 们 却 认为 布 
不 需要 在 不 同 平台 和 分 辩 率 下 保持 一 致 。 
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实际 工作 中 ， 设 计 师 经 常 为 字体 和 容器 使 用 em 单位 ， 而 其 他 元 素 则 灵活 地 
各 用 像素 和 相对 值 来 建立 一 个 弹性 的 布局 。 这 些 或 者 相似 的 混合 布局 在 实际 
情况 中 最 常见 ， 反 映 了 设计 师 希望 为 每 种 情况 找到 最 佳 解决 方案 的 努力 。 





































































































































































































2.7” 哪 种 布局 最 适合 您 的 网 站 ? 众 妙 之 门 





























在 总 结 之 前 ， 有 必要 提 一 下 智能 手机 、 上 网 本 和 游戏 终端 ， 这 些 设 备 现 在 都 
可 以 进行 网 页 浏览 ， 所 以 更 低 ( 或 者 更 高 ) 的 分 状 率 变 得 越 来 越 重要 ， 而 是 
应 当 进 行 认 真 考 虑 。 对 于 这 类 平台 ， 动 态 的 分 辩 率 切换 技术 将 会 非常 
而 且 在 将 来 扩展 你 的 布局 类 型 时 会 是 不 二 的 选择 。 虽 然 构建 自 适应 性 的 布局 
需要 耗费 很 多 时 间 ， 但 是 由 于 能 够 处 理 或 小 或 大 的 各 种 类 型 的 分 辩 率 ， 会 帮 
助 设计 师 为 用 户 呈 现 最 合适 的 效果 。 随 着 屏幕 宽度 的 不 断 增加 ， 使 用 所 有 这 
些 技 巧 只 是 个 时 间 问 题 。 
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Alessandro Cattaneo — Yues Peters Jon Tan 














HE 











并 1 
Robert Bringhurst 说 “排版 将 使 内 容 增色 ”, 他 是 著名 的 排版 经 典 之 作 一 一 《 排 


HERR: 原则 、 方 针 和 常见 错误 






































版 是 设计 的 灵魂 ， EE 视觉 识别 能 力 的 核心 。 这 章 将 对 网 站 排版 行 探索 ， 
苗 述 组 合 的 方法 和 技巧 ， 它 们 将 给 予 文档 生命 并 使 文档 容易 理解 。 

































































































































































































































































































































































































































































































































































































































































版 基础 》( The Elements of Typographic Style ) 的 作者 。 网 站 排版 尤其 是 文字 
选取 、 排 列 和 字体 设计 ， 丰 富 了 文本 的 意义 ， 同 时 提供 了 一 个 使 文本 获得 生 
命 的 框架 。 
排版 包含 了 很 多 主题 和 应 用 ， 甚 至 包括 现在 互联 网 上 的 信息 数字 化 。 它 包含 
选择 最 好 的 字体 、 提 高 可 读 性 、 定 义 品牌 和 企业 形象 、 销 售 产品 、 使 信息 更 
容易 被 读者 理解 。 如 果 排 版 的 一 些 基 本 原则 应 用 得 不 到 位 ， 有 时 足以 导致 读 
者 流失 。 
让 我 们 把 目光 投向 排版 刚刚 兴起 的 时 候 ， 古 登 堡 ( Gutenberg ) 在 1455 年 使 
的 黑色 字体 ， 也 许 在 今天 并 不 合 每 个 人 的 口味 ， 但 是 毫 无 疑问 即使 按 今 天 
的 标准 , 它 也 塔 称 做 工 精美 。 当 为 网 站 进行 设计 时 ,我 们 的 线条 无 法 如 此 精美 ， 
我 们 的 连 字 (ligature ) 不 能 像 400 多 年 前 古 登 堡 在 纸 和 羊皮 纸 上 印 的 那样 。 






















































































































































































































































































































































































设计 产品 的 方法 已 经 发 生 了 改变 ， 但 是 并 没有 完全 改变 。 文 字 排 印 不 再 是 
专业 技师 完成 的 手工 劳动 ， 更 多 是 根据 设计 师 设 定 的 视觉 模型 通过 命令 进行 
抽象 。 字 体 不 再 是 显示 在 纸 上 ， 而 是 被 光栅 化 成 像素 ， 显 示 在 电脑 屏幕 上 ， 
这 是 网 站 排版 不 同 的 地 方 。 不 再 是 挑选 印刷 的 纸张 和 材质 ， 我 们 现在 要 处 理 
的 是 不 同 的 显示 器 类 型 、 分 辩 率 、 浏 览 器 和 操作 系统 ( 很 多 系统 有 不 同 的 引 
Z )。 网 页 排版 时 必须 把 它们 都 考虑 在 内 。 
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经 第 一 卷 的 第 一 页 ， 由 1455 年 左右 的 早期 字体 印 制 。 装 饰 性 的 彩 1 
抄写 
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现在 只 要 鼠标 轻 轻 点 击 就 可 以 使 用 大 量 的 字体 。 这 并 不 是 说 它们 都 适合 用 在 
网 站 上 。 大 部 分 字体 是 供 印 刷 使 用 的 ， 而 不 是 供 我 们 用 来 浏览 网 页 的 、 分 辩 
率 相对 较 低 的 屏幕 使 用 的 。 专 门 为 屏幕 设计 的 字体 问世 和 对 跨 平 台 和 跨 浏览 
器 支持 的 要 求 ， 把 我 们 放 在 了 一 个 和 昔日 设计 师 和 印刷 业者 相似 的 位 置 。 我 
们 仅仅 可 以 使 用 一 小 部 分 字体 ， 我 们 对 它们 已 经 非常 熟悉 ， 有 时 在 一 些 CSS 
样式 的 帮助 下 ， 我 们 会 尽 可 能 广泛 地 使 用 它们 。 

















































































































































































































































































































































































































































































































网 站 设计 和 桌面 出 版 都 在 进化 演变 ， 但 道路 不 同 网 站 设计 还 处 在 萌芽 阶 
段 。 一 些 东西 已 经 消失 ， 而 一 些 东西 我 们 已 经 拥有 。 我 们 可 以 利用 现 有 的 工 
很 好 地 工作 ， 比 如 HTML 和 Css ( 如 果 非 常 有 必要 ，JavaScript 和 Flash 也 
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TREA ) 一些 排版 中 的 旧 规 则 和 指导 原则 可 以 应 用 于 网 站 ， 但 不 是 所 
的 都 可 以 。 三线 交流 是 一 和 不 同 的 新 媒体 ， 通过 它 ， 编辑 和 读者 oj 以 交流 ， 


这 将 会 影响 到 排版 。 


3.1 传统 排版 和 网 站 排版 


我 们 经 常 认 为 写作 是 一 件 简单 的 事情 ; 我 们 经 常 认为 使 用 正确 的 语法 、 决 定 
元 素 在 页 面 布局 中 的 顺序 以 及 选择 视觉 效果 好 的 字体 就 足够 了 。 但 是 排版 的 
艺术 包含 很 多 经 常 被 忽略 的 因素 ， 对 于 网 站 而 言 更 是 如 此 ， 整 个 写作 和 发 表 
过 程 是 沉浸 式 的 ， 文 本 的 质量 经 常 被 忽略 。 在 这 一 章 ， 我 们 将 会 展示 很 多 不 
同 的 排版 技术 、 良 好 的 实践 和 一 些 经 验 之 谈 
但 是 首先 让 我 们 仔细 看 一 看 网 站 排版 的 一 些 基 本 概念 。 
清晰 度 受 字体 设计 、 屏 幕 优 化 和 微观 版 式 影响 。 它 与 
字符 、 字 和 母 或 字形 相关 。 我 们 不 能 改变 字体 的 外 形 ， 但 站 
体 ， 并 且 选 择 相应 的 版 式 。 当 涉及 清晰 度 问题 时 ， 许 多 设计 师 在 一 些 标准 、 
探索 法 和 排版 技巧 上 达成 了 共识 。 比 如 , 大 写字 母 会 比 小 写字 母 更 难以 扫 读 ， 
正体 字 比 斜体 字 更 容易 识别 。 在 正文 文本 和 背景 间 合 适 的 对 比 会 提高 清晰 度 ， 
FE 如 适宜 的 行 宽 和 行 高 所 产生 的 效果 。 与 字母 的 下 半 部 分 相 比 ， 上 半 部 分 对 
于 扫 读 的 意义 更 大 ， 然 而 升 部 ( ascenders ) 和 降 部 ( descenders ) 的 高 度 对 
于 字母 的 识别 具有 重要 作用 ， 这 也 是 很 多 人 认为 有 衬 线 ( serifs ) 字体 更 容 
易 识 别 的 原因 。 正 如 你 所 看 到 的 , 当 我 们 谈 到 清晰 度 时 ,很 多 因素 都 在 起 作用 。 
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1 


传统 排版 和 网 


站 排版 


A SPECIMEN 


By WILLIAM CASLON, Letter-Founder, in Chifwell-Street, 


ABCD 


ABCDE 


ABCDEFG 
ABCDEFGHI 


ABCDEFGHIJK 
ABCDEFGHIJKL 
ABCDEFGHIKLMN 


French Cannon. 


Quoufque tan- 
dem abutere, 


Catilina, pati- : 


Quoufque tandem 
ubuiere, Curius, 
patientia noftra? 


"Two Lines Great Primer. 


Quoufque tandem 
abutere, Catilina, 
patientia noftra ? 


quamdiu nos etiam = 


Quoufque tandem a- 
butere, Catilina, pa- 
tientra noftra? quam- 
diu nos etiam furor 
Two Lines Englith. 
Quoufque tandem abu- 
tere, Catilina, patientia 
noftra? quamdiu nos e- 
tiam furor ifte tuus elu- 
Quoufgue tandem abutere. 
Cat thea patientia nofira? 
quamdiu nos etiam furor 





DovsLE Pica ROMAN. 
Quoufque tandem abutere, Cati- 
lina, patientia noftra ? quamdiu 
nos etiam furor ifte tuus eludet? 
quem ad finem fefe effrenata jac- 
ABCDEFGH JIKLMNOP 


Great Panter Roma. 
Quoufque tandem abutére, Catilina, pa- 
tentia noftra ? quamdiu nos etiam fu- 
ror ifle tuu: eludet? quem ad finem fe- 
fe effrenata jactabit audacia? nihilne te 
no&urnum prefidium palatii, nihil ur- 
bis vigilia nihil timor populi, nihil con- 

ABCDEFGHIJKLMNOPQRS 


ENGLISH Roman, 

voulue tandem abutére, Catilina, patientia 
SSS Sor ie ETE 
quem ad finem fefe effrenata jactabit audacia ? 
nihile te noSurnum præfidium palatii, nihil 
prbis vigilia, nihil timor popali, mhil cone 
us bonomm omnium, nihil hic munifimus 
ABCDEFGHIJKLMNOPQRSTVUW 


Pica Roman, 
Melum, novis rebus fludentem, manu fua occidit. 
fuit ita quondam in hac repub. virtus, ut viri 
iciofum, quam 
«bemus enim fe- 
ens, &grave: 
vicus hujus or- 


us De- 
VUWX 











tes acrioribusfüpplicis civem pe 
acerbiffimum hoftem coereerent. 
natufconfaltum in te, Catilina, 

mon deeft reip. confilium, neque 
dinis: nos, nos dico aperte, coi 
ABCDEFGHIJKLMNOPQR: i 







Smart Prea Roman Ner 
Bionic fabes enim nad 人 an vc 
fms on incluiom in tabuli tanquam ghadhom in vigas 
jo ex enaueonflto confi intefetum e. 

Vis sn non d dort 
te Gy He 









ef Llementesr: cupio im ramis repu. periculis non dif 
ABCDEFGHIJKLMNOPQRSTVUWXYZ 


Swart Prca Rowaw Nox. 


al tap 
Feelin; qu ex e ide 
fie, Catia, oen Via: levi non ad ponendum. 
fed ai conitmanism sacan. Cup, P. C 


DC, me efè 

Semenem: cupo in trie repr. pericli pon 

ABCDEFGHIJKLMNOPORSTVUWXYZ 
Lore Paiman Rowan Not. 


Verom ego boc, quod jampridem ftm eli port, cena de 
Mer ee erepti ended 











i». muna etm oculi aure non eaten icatadhuc 
runt, heculantar, aique culdien. Erenin quid et, 
‘AUCDEPGHIJRLMNOPQRSTUVWXYZE 


Lono Prien Rowan, Noa 


= peri 


有 


Double Pica Malick. 
Quoufque tandem abutere, Catili- 
na, patientia nofira ? quamdiu 
nos etiam furor. ife tuus eludet ? 


quem ad finem fefè effrenata jac- 
ABCDEFGHYIKLMNO 


Great Primer Italick. 
Quoufyue tandem abutére, Catilina, pa- 
musta nofira? quamdiu ms etiam fu- 
ror ifle tuus eludet ? quem ad finem fefe 
effrenata. jatfalit audacia ? nibilne te 
nočturnum prafidium palatii, nibil ur- 
bis vigiliæ, nibil timor populi, nibil con- 
ABCDEFGHIFKLMNOPQR 


Erglifo Tealick 
tandem abutere, Catilina, patientia 
nr quamdiu nos etiam furor ihe poi 
quem ad finem fife efrehata. jaabit audacia ? 
"lile te nolurnum praæfidium pelati, nibil ur- 
dis vigile, nibil timor fapuli, mihl. conenfus bo 
morum omnium, iil be Fi Babendi fi- 
ABCDEFGHIY KLMNOPRRSTPU 


Pita Jaliek 
Melium, novis rebus fudente, mann fua. cectdt. 
Frit, fuit ifa. quondam in bae repub, virtus, ut viri 
‘fortes acrloribus fapplirit civem perridafum, quam a- 
erbiffanum boflem eeéreerent, Habems enim fenainj- 
confit in te, Catilina, vebemens, E? grave: ton def 
reip. confilium, negue autoritas bujus ordinis nos, net 
dico aperte, conjeles defer, Decrevit quondam [omatus 
ABCDEFGHIJKLMNOPQRSTKUW XYZ 








Small Pica Halik, Not. 
A tren jan diem patina here aciem lum 


(atemu irt by inact fatis, veram 
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Pica Gothick, 
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众 妙 之 门 





































































































人 
18 世纪 著名 英国 字体 设计 师 William Caslon 设计 的 罗马 字体 的 一 个 样本 。 
可 读 性 是 设计 主要 关注 的 问题 。 它 受 块 的 摆 放 和 独立 栏目 的 展现 
影响 。 我 们 可 以 通过 很 多 方式 保证 可 读 性 , 其 中 很 多 方式 都 受 读者 习惯 影响 。 
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TIE 
也 Z 


EX E, 
行为 和 为 这 种 行头 


| 
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品 的 方式 不 同 。 理 解 
体验 设计 的 要 点 。 网 色 


站 内 容 的 方式 


pos 


dE" 网 


p. 


进行 设计 非常 关键 
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HERR: 原则 、 方 针 和 常见 错误 





o exe C M: 
| E] How To Hack Your Brain, Part 1: Slee. | + 








PART ONE ir 


HOW 


My body is incompatible with Earth. 


It has a daily sleep-wake cycle that lasts about 28 hours instead of 24 hours, which 
means each day | stay awake about tour hours longer than most people. In the 
middie of the week, I sometimes find myself waking up at 11PM and going to bed in 
the early aftemoon the next day When | was younger, people thought Iwas insane 
The only thing I remember of elementary school is being tired. 
Eventually, I discovered that i | stuck lo a 
Í 28-hour schedule, my body was happy; 1 
woke up rested, went to sleep tired, and 
everything worked great. Except, wel, that 
my life was incompatible with the rest of 
d the world. Lving with a normal schedule 


was going to be tough, so | had to find a 
solution 











对 于 一 些 设计 者 而 言 ， 网 站 设计 完全 就 是 排版 。 在 Dustin Curtis 的 网 站 上 ， 版 式 
非常 醒目 ， 它 蕴含 着 微妙 的 视觉 线索 。 















































[ 宽 ( measure 或 line length) 就 是 每 行文 本 的 长 度 。 最 佳 的 长 度 取 决 于 上 

下 文 ， 但 是 对 于 左 对 齐 的 文本 块 ，45 到 75 个 字符 ( 包括 标点 符号 和 空白 ) 
之 间 的 长 度 值得 推荐 。66 个 字符 被 认为 是 最 佳 的 长 度 : 这 个 长 度 阅读 起 来 
最 舒服 ， 使 有 眼睛 不 必 在 本 行 结束 和 下 一 行 开 始 之 时 移动 太 远 的 距离 。 不 要 让 
行 宽 太 短 ， 因 为 频繁 地 在 行 与 行 之 间 移 动 ， 同 样 会 使 眼球 疲劳 。 


令 人 惊讶 的 是 ， 我 们 最 近 关 于 版 式 设计 的 研究 发 现 ， 包 含 大 量 文 本 、 排 版 

































































































































































































































































































































































































































































































































































关 的 网 站 ( 新 闻 、 杂 志和 排版 相关 的 博客 等 ) 和 的 行 宽 ， 通 常 在 70 
到 100 个 字符 之 间 ( 每 行 最 多 的 字符 数 )。 总 体 上 ， 每 行 的 字符 在 75 到 85 
个 之 间 。 不 过 ， 目 前 还 没有 研究 表明 这 样 的 行 宽 是 否 会 带 来 更 好 或 更 坏 的 可 
读 性 。 
另外 ， 很 多 网 站 是 多 栏 布局 。 行 宽 在 多 栏 布 局 中 可 能 会 短 一 些 。 根 据 习惯 ， 
对 齐 的 文本 通常 在 区 域 的 下 半 部 分 ， 但 是 不 需要 精确 控制 单词 间 的 空白 和 





















































1 http:/www.smashingmagazine.com/?p=8182 
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3.1. 传统 排版 和 网 站 排版 众 妙 之 门 

















连 字 符 ， 较 长 的 行 在 浏览 
tk 
LO 






































示 效 果 会 更 好 
































虽然 设置 正确 的 行 宽 很 重 
是 可 读 性 可 以 通过 正确 


( leading 或 line height ) 
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Eo 行 高 就 E 
度 。 它 是 两 个 连续 文本 之 


















































E 
eu 
LU 
38 

o 
S 
m 
F 
| 
a 
F 




















Bik 

i 

i 
E 
ES 
ky 
S 
2n 
N 








Recommendation 





















的 行 高 。 在 默认 情况 下 ， 浏 览 器 
会 把 行 高 设 定 为 em， 或 者 字体 
大 小 的 1 信 ， 这 个 高 度 通 常会 
至 于 不 好 辨析 字 
i BE. 
的 行 高 设 定 为 字体 大 小 的 
实际 上 ， 根 据 我 们 对 平均 行 


究 发 现 ， 这 个 约定 俗 成 的 
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4) 
> 
Z 
poem 
pus 
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s 
1 
MA 

























Interweb Piracy 





































































































Al 
Ad xm 平均 = 
o 在 被 广泛 人 N d Eu Trentwalton.com， 一 个 由 Trent Walton 
字体 大 小 的 1.48 fi lo 作为 一 个 ”设计 的 关注 排版 的 博客 。 
简单 的 指导 ， 行 宽 越 大 ， 行 高 也 
应 越 大 。 
































注意 到 我 们 在 CSS 中 可 以 通过 无 确定 单位 的 整数 来 定义 行 高 值 。 这 个 数字 作 

度量 因素 和 字体 大 小 相关 ， 并 确保 在 文字 大 小 改变 后 ， 行 高 也 发 生 相 应 的 
变化 。 总 体 来 说 ,无 衬 线 ( sans serif ) 字 体 比 衬 线 ( serif ) 字 体 需 要 更 大 的 行 高 ， 
页 眉 比 正文 需要 更 少 的 行 宽 。 同 样 , 较 粗 字体 比较 细 的 字体 需要 更 大 的 行 高 。 


























































































































































































































字母 间距 (tracking 或 letter spaceing ) 是 字母 之 间 的 间距 ， 也 是 文本 块 之 间 
的 密度 ， 它 可 以 根据 行 宽 进 行 调整 。 在 分 辩 率 较 低 的 情况 下 ， 根 据 像素 值 调 
整 字 符 间距 可 能 有 困难 ， 因 为 它 产 生 了 不 连续 的 效果 。 正 因为 这 样 ， 字 符 
间距 经 常用 来 突出 副标题 。 然 而 ， 作 为 一 个 简单 的 指导 ， 如 果 行 宽 越 长 ， 你 
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HERR: 原则 、 方 针 和 常见 错误 























就 越 需要 调整 单词 间距 ， 字 母 间 距 也 通常 需要 增加 。 要 小 心 操 作 。 一 些 衬 线 

字体 的 字符 有 时 可 能 会 重叠 ， 它 们 应 该 被 当做 连 字 处 理 。 

当 我 们 对 字母 间距 进行 实验 时 ， 要 确保 “AV”"、“ft”"、“co” 清 晰 可 读 ， 并 检 

查 是 否 能 区 分 出 “vw” 和 “w”: 即使 是 最 小 程度 的 不 精确 ， 也 可 能 会 使 文 
A 






























































































































































成 对 字符 间 的 字母 负 间 距 也 被 称 为 kerning， 它 对 于 调整 “ff"、“fl"、“ 仙 ”这 
类 字符 组 很 有 必要 ， 它 们 实际 上 应 该 被 当做 连 字 。 在 很 多 情况 下 ， 负 字符 间 
距 对 于 提高 字体 的 外 观 很 有 用 。 比 如 ,把 “T” 和 “e” 靠 得 更 紧凑 些 。 












































































































































lm 

















ff 词 间距 (Word Space) 可 以 根据 行 宽 和 行 高 进行 调整 。 行 越 短 ， 单 词 间距 
越 小 。 较 长 的 行 通常 会 通过 更 多 的 单词 间距 受益 ， 尤 其 是 它们 有 相当 可 观 的 
行 高 时 。 
排版 色彩 不 是 染色 或 上 色 ， 页 面 看 起 来 应 该 连贯 。 如 果 你 在 屏幕 上 正视 或 睐 
眼看 一 块 文本 区 域 时 ， 它 应 该 有 一 个 统一 的 色调 ， 而 不 应 该 令 人 眼花 综 乱 。 
如 果 这 样 ,阅读 将 会 不 连贯 。 只 有 在 需要 故意 引起 注意 的 情况 下 才 会 这 样 做 。 
颜色 也 会 受 负 字母 间距 影响 。 不 幸 的 是 ， 现 在 因为 浏览 器 无 法 正常 支持 它 ， 
无 法 对 此 进行 调节 。 


3.2 基本 的 排版 术语 
这 里 是 一 个 与 排版 相关 的 术语 的 简要 总 结 ， 以 便 我 们 对 这 篇 文章 接 下 来 的 部 
分 有 一 个 一 般 性 的 认识 。 


重音 〈Accent) ;一 个 在 字母 附近 或 横 穿 字母 的 附加 符 ， 表 示 了 发 音 的 变化 。 
比如 6, à, ò, é, Åo 


中 轴 (Axis) ， 一 条 真实 的 或 想象 的 直线 ， 字 母 围绕 它 旋 转 。 
基线 (Baseline): 一 条 想象 的 线 ， 字 母 停留 在 它 上 面 。 


DÆ (Bowl): 一 些 字 母 的 圆 形 或 椭圆 形 部 分 , 它 构 成 这 些 字母 的 主体 , 比如 ， 
大 写字 母 C、G、0， 小 写字 母 b、c、e、o、p。 它 相当 于 眼眶 。 


































































































































































































































































































































































































































































































30 

































































1 这 个 总 结 部 分 基于 TypeNow 的 术语 表 (http://www.typenow.net/glossary.htm). 
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3.2 基本 的 排版 术语 众 妙 之 门 


大 5 X 高 度 (Cap height) H als Cap height] Wikipedia | à 


1 Descender 

















































































































































































































些 大 写字 母 的 高 度 。 
HA (Counter) ;被 字母 形体 包 读 mae Avis Ligature tine 
x-line 

的 空 , 无 论 是 完全 被 包 FB 比如 人 

1 tg 或 ta u en 被 Downstroke Upstroke P 

+ E ANE ARTI 已 

Fb ( 比如 在 te" 或 "m" 5 H Serifs b Terminal 
amburg 

#82 (Crossbar): EK 5E rn Serifs 

XEÓEWpAÉBÜT^4XGEÉBS, 个 来 自 维基 百科 ( Wikipedia. 

RE E E ， 8 






























































de) 的 排版 术语 的 概要 。 





考 字母 "AT 和 “H”o 
段 首 字母 下 沉 (Drop Cap): 段 首 字母 大 写 ， 并 占据 多 行 的 高 度 。 


左 对 齐 (Flush lefO :使 任何 空白 都 出 现在 右边 ， 文 字 都 靠 左 对 其 。 也 被 称 
为 ragged right. 















































































































































AX (Flush right) ， 使 任何 空白 都 出 现在 左边 ， 文 字 都 靠 右 对 齐 。 

字形 〈Glyph) :字体 中 每 一 个 字符 ( 比如 :G、$、?、7 ) 都 会 个 字形 代表 。 
一 种 字体 中 ， 一 个 字符 可 能 会 有 多 个 字形 。 它 们 通常 被 称 为 蔡 代 字符 。 
EF (Ligature): 两 个 或 更 多 的 字母 连接 在 一 起 ， 通 过 空间 交互 组 成 一 个 
独立 的 字母 。 
AS (Majuscule): 大 写 的 字母 。 
KAZ (Sans serif): 没有 衬 线 的 字体 。 
We (Serif): 在 字形 每 一 个 主要 的 笔画 后 面 的 一 个 装饰 性 小 笔画 。 有 衬 线 
的 字体 被 称 为 serif 字体 ， 没 有 衬 线 的 字体 被 称 为 sans serid 字体 。 


小 型 大 写字 母 (Small Caps) :小 型 大 写字 母 就 是 高 度 较 矮 的 一 类 大 写字 母 。 
很 多 应 用 程序 通过 压 遍 大写 字母 产 生 小 型 大 写字 母 ， 但 是 这 样 产 生 的 字母 缺 
乏 合 适 的 重量 和 比例 。 一 个 真正 的 小 型 大 写字 母 保 持 了 符合 比例 的 重量 ， 


EAE WRT ERS eto 


终 笔 〈Terminal) ;无 衬 线 字体 的 最 后 一 笔 。 
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HERR: 原则 、 方 针 和 常见 错误 





























x 高 度 (x-heigh ， 小 写字 母 的 高 度 ， 通 常 以 小 写字 母 x 为 例 。 


实际 上 ,在 指 字体 时 人 们 经 常 把 "typeface "( 字体 ) 和 “font”( 字体 文件 ) 混 用 。 
typeface 指 的 是 某 类 特殊 字体 的 设计 ， 而 font 指 的 是 包含 我 们 使 用 字形 的 
个 文件 。 比 如 ，George 指 的 是 typeface， 而 Georgia-Bold.ttf 指 的 是 font， 一 
包含 了 这 个 字体 所 有 粗 体 字 形 的 文件 。 换 名 话说， 对 字母 、 数 字 和 符号 等 
的 实体 化 集合 ( 无 论 是 金属 块 还 是 计算 机 文件 ) 就 是 一 种 “font”( 你 选择 
并 使 用 的 文件 )。 
当 我 们 指 字体 集合 的 设计 时 ( 也 就 是 字体 看 上 去 的 样子 ), 我 们 指 的 是 “type- 
face”。 打 个 比方 ， 我 们 播放 MP3 文件 ， 但 是 我 们 听 到 的 却 是 优美 的 歌曲 。 


3.3 ”相对 和 绝对 的 字体 尺寸 单位 


也 许 数字 化 排版 最 不 同 的 特点 就 是 用 户 能 够 根据 自己 的 偏好 调整 字体 大 小 。 
当选 择 了 一 个 字体 大 小 后 ， 网 站 开发 者 可 以 使 用 绝对 或 是 相对 的 度量 单位 ， 
也 可 以 在 CSS 中 设置 。 总 体 来 说 ， 绝 对 单位 更 适合 印刷 品 的 设计 ， 把 它们 

于 网 站 排版 不 是 很 好 的 实践 。 的 例外 是 打印 样式 表 ， 绝 对 单位 可 以 帮助 
定义 文档 上 设计 区 域 的 大 小 。 目 前 被 支持 的 度量 单位 包括 pt. pc. cm, mm 
和 in。 但 是 像 xx-small、x-small、 small, medium, large, x-large 和 xx-large, 
也 同样 可 以 选择 。 
设 定 “ 绝 对 ”的 字体 大 小 并 不 意味 着 用 户 不 能 增加 或 减少 字体 的 大 小 。 现 代 
浏览 器 允许 大 量 针 对 文本 的 操作 。 甚 至 ， 绝 对 单位 使 设计 者 在 父 元 素 和 子 元 
素 之 间 设 定 比 例 变 成 了 不 可 能 的 事情 ， 即 使 用 户 手 动 地 增加 或 减少 字体 的 大 
小 ， 字 体 的 大 小 也 会 不 变 。 因 此 ， "absolute” 属 性 与 样式 表 中 元 素 的 定义 
关 ， 而 与 屏幕 显示 无 关 。 


设 定 “ 绝 对 ”的 字体 大 小 并 不 意味 着 用 户 不 能 增加 或 减少 字体 的 大 小 。 
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现代 浏览 器 会 默认 把 <body> 元 素 的 字体 大 小 设 定 为 16 像素 。 如 果 你 不 在 样 
式 表 中 明确 地 指定 其 他 值 ， 将 会 使 用 这 个 值 。 为 了 避免 复杂 的 计算 ，Richard 
Rutter 建议 把 «body» 的 字体 大 小 设 为 62.5%， 这 将 把 文字 的 大 小 降低 到 10 
像素 ( 16 像素 x 0.625 )。 相 应 地 ， 当 把 标题 字体 大 小 设 定 为 18 像素 时 ， 使 
1.8em， 而 不 使 用 1.125em ( 18 像素 : 16 像素 = 1.125 ) 更 合适 一 些 。 
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实际 上 ， 字 体 大 小 通常 使 用 相对 单位 ， 比 如 px. em 或 %。px ( 像素 ) 与 显 
示 器 的 分 辨 率 相关 。 分 辨 率 越 高 ， 像 素 密度 越 大 。 通 常 这 也 意味 着 字体 看 上 


会 更 小 。 


"em" 是 通过 你 使 用 的 字体 大 小 来 定义 的 度量 单位 。 它 代表 了 基线 ( baseline ) 
之 间 的 距离 ， 当 字体 属性 被 设 定 为 solid ( 不 含 行 高 ) 时 。em 是 一 个 相对 
的 单位 ， 它 的 值 一 般 是 文本 元 素 父 元 素 大 小 的 倍数 。 所 以 ，1lem 对 于 16 点 
( point ^) 的 字体 而 言 ， 意 味 着 16 点 。 如 果 用 户 浏览 器 默认 的 字体 大 小 是 16 
RA, BA lem 就 代表 16 像素 ,这 基本 仅仅 是 文本 显示 尺寸 的 一 个 属性 值 。 
如 果 用 户 把 字体 尺寸 降低 到 14 像素 ， 那 么 2em 将 代表 28 像素 。 


EH em 作为 字体 大 小 单位 的 好 处 是 ， 这 个 度量 单位 在 设 定 父 元 素 和 子 元 素 
的 比例 方面 有 着 天 生 的 能 力 ， 以 及 对 CSS 继承 特性 的 利用 。 利 用 这 个 特性 
子 元 素 可 以 继承 父 元 素 的 大 小 ， 除 非 明 确 声明 了 进行 尺寸 更 改 。 比如 ， 如 
果 默 认 字体 大 小 是 16 像素 ，<body> 元 素 的 字体 大 小 为 2em，<body> 之 内 
的 页 收 字 体 大 小 为 1.5em， 那 么 页 眉 的 字体 大 小 将 是 <body> 元 素 的 1.5 fii, 
也 就 是 1.5X2X16 像素 =48 像素 。 


在 某 种 程度 上 上， 百分比 近似 于 em 值 : css 中 文档 的 根 、 继 承 和 父子 元 素 的 
对 关系 会 为 每 一 个 元 素 定 义 大 小 。 所 以 在 上 面 的 例子 中 ， 可 以 定义 <body> 
元 素 的 字体 大 小 为 200%， 页 收 的 字体 大 小 为 150%, 结果 是 相同 的 (48px )o 

在 一 些 环境 中 ， 将 最 小 宽度 和 最 大 宽度 属性 设置 为 em 或 百分比 对 于 获得 
一 个 可 读 性 好 的 行 宽 会 很 有 帮助 。 通 常 ， 字 符 的 平均 宽度 是 2/3 em。 因 此 
30em 和 50em 可 以 被 视 为 理想 的 行 宽 。 
AA IE6 不 允许 用 户 按 像素 缩放 文本 ， 因 此 建议 使 用 em 或 百分比 值 。 不 过 ， 
当 使 用 相对 单位 时 要 小 心 谨 愤 。 使 用 一 些 尺度 和 分 级 ( 参考 下 文 ) 来 确保 不 
司 重量 的 文本 元 素 能 够 准确 、 恰 当地 呈现 。 


AA IE6 不 允许 用 户 按 像素 缩放 文本 ， 建 议 使 用 em 或 百分比 值 。 
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1 最 初 , em 被 认为 等 于 某 个 特定 字体 中 大 写字 母 “M” 的 宽度 , BA "M" 在 印刷 过 程 中 通常 占据 整个 方块 区 域 。 然 而 在 
现代 字体 中 , 字母 M 通 常 比 lem 的 宽度 要 略 窗 一些。 另外, 因为 一 些 字符 集 不 包含 大 写字 母 “M”, 比如 中 文字 符 和 阿拉 
伯 字 , 今天 em 一 般 指 相关 字体 的 高 度 。 
2 ESE: point 是 印刷 中 常用 的 度量 单位 , 在 英国 和 美国 1 point = 0.351mm, 在 欧洲 1 point = 0.376mm。 
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HERR: 原则 、 方 针 和 常见 错误 



























































他 相对 度量 单位 在 实践 中 很 少 被 使 用 : 虽然 被 广泛 支持 ， 但 “ex” 和 
"smaller". "larger" ( 它们 把 字体 大 小 降低 和 增加 1.2em ) 关键 字 从 来 不 会 
在 样式 表 中 被 大 量 使 用 。 同 样 ， 点 (point) 在 印刷 中 很 有 用 ， 但 是 也 不 会 
被 用 在 屏幕 上 。 人 们 浏览 器 的 默认 设置 也 许 会 略微 不 同 ， 这 可 能 会 对 版 式 产 
生 负 作用 。 为 了 确保 独立 于 浏览 器 展示 文本 ， 使 用 CSS 全 局 重 置 ， 人 允许 你 在 
一 个 安全 的 独立 于 浏览 器 的 环境 中 ， 设 置 字体 和 设计 网 站 的 全 部 元 素 。 有 很 
多 种 css 重 置 样式 表 ， 从 * (padding: 0; margin: 0: } 到 比较 长 的 那些 ， 比 如 
Eric Meyer 的 Reset Stylesheet 4 ， 各 不 相同 。 















































































































































































































































































































































































































































































































































3.4 空白 是 最 好 的 空间 
版 


在 网 页 排版 中 使 用 空白 的 重要 性 是 无 法 低估 的 ， 空 白 使 正文 的 连续 文本 能 
‘f 
Ea 















































呼吸 ， 并 帮助 读者 获取 网 站 传递 的 信息 。 空 白 也 被 称 为 “ 
中 元 素 之 间 的 空 队 ， 或 者 设计 中 没有 被 使 用 的 部 分 ， 包 括 
面 和 分 栏 ( 宏观 空白 ) 之 间 的 空白 ， 以 及 文本 行 之 间 、 单 词 
之 间 ( 微观 空白 ) 的 空白 。 当 然 ， 空 不 一 定 是 白色 的 这 个 词 来 自习 
印刷 领域 ， 因 为 在 这 个 领域 中 ， 白 纸 即 代表 了 空白 。 
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对 排版 细节 的 重视 ， 尤 其 是 空白 ， 在 Elliot Jay Stocks 的 展示 网 站 上 尤为 突出 。 注 
意 发 挥 空白 的 平衡 作用 ， 它 用 来 突出 引用 内 容 和 上 段落 中 的 非 活 动 空白 。 























































































































1 http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/。 


众 妙 之 门 



































哮 些 把 用 户 的 注意 力 从 一 个 元 素 引 导 到 另 一 个 元 素 ， 组 织 布 局 并 帮助 建立 信 
息 结构 的 空白 被 称 为 “活动 空白 ”( active white space )， 那 些 把 文本 规划 成 
决 的 空白 被 称 为 “ 非 活动 空白 ”( passive space )。 


实际 上 ， 很 多 清晰 度 和 可 读 性 问题 都 可 以 被 解决 或 至 少 被 减弱 ， 只 要 审慎 地 、 
均衡 地 使 用 空白 。 正 像 页 间 、 内 边 距 、 外 边 距 、 行 宽 或 行 高 的 一 些 额 外 的 像素 
可 以 很 大 程度 上 影响 内 容 整体 的 清晰 度 。 不 仅 如 此 ， 引 文 、 图 像 和 列表 的 缩 进 
不 仅 可 以 改善 布局 的 结构 和 展现 效果 ， 也 可 以 使 设计 更 富有 动态 和 表现 力 。 





































































































































































































































































































































































































在 ClapCalp 的 展示 网 站 ， 空 白 起 了 主导 作用 。 它 突出 了 所 展示 的 产品 的 质量 ， 
更 它们 更 加 优秀 、 更 加 人 性 。 




































































如 果 在 内 容 和 环绕 内 容 的 空白 之 间 没 有 好 的 平衡 ， 文 本 将 很 难 阅读 或 扫 读 ， 
吏 用 户 有 种 挫败 感 ， 并 对 你 的 信息 缺乏 信心 。 对 于 网 站 尤其 是 这 样 ， 很 多 设 
计 者 通过 “above the fold" 来 填充 空 阶 ， 试 图 抓 住 用 户 的 注意 力 ， 这 导致 
rea 


网 站 内 容 过 于 密集 、 难 以 使 用 ， 这 当然 不 是 设计 者 的 最 终 目 的 。 从 用 户 的 角 
， 空 白 提供 了 线索 和 定位 ， 有 助 于 产生 自然 的 、 令 人 满意 的 阅读 体验 。 





















































































































































































































































































































































































































































一 些 设计 者 声称 ， 设 计 永 远 不 要 使 用 太 多 的 空白 。 事 实 并 不 总 是 这 样 ， 因 为 
文本 块 的 聚合 和 连贯 对 于 一 个 平衡 的 布局 是 很 重要 的 。 平 衡 正 空间 ( 非 
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1 译 者 注 : above the fold 是 一 个 平面 设计 术语 , AA ERARE — hR T ESO IC 89 88 2 Eg URB EW, 一 
般 是 指 首页 第 一 屏 你 所 能 看 到 的 、 不 需要 向 下 滚动 的 那 部 分 内 容 区 域 。 
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HERR: 原则 、 方 






































的 ) 和 负 空 间 对 于 产生 美丽 、 和 谐 和 念 人 展 至 关 重 要 。 正 如 Mark 
Boulton 在 他 的 一 篇 文章 中 陈述 的 那样 ，“ 一 旦 你 知道 如 何 设计 和 操控 外 部 、 
内 部 和 内 容 周 围 的 空白 ， 你 将 能 够 给 读者 一 个 好 的 开始 、 使 他 们 更 加 精确 地 
定位 你 的 产品 ， 甚 至 也 许 会 用 新 的 眼光 看 待 你 的 内 容 "。 


3.5 ”排版 和 网 格 


排版 网 格 是 由 一 系列 垂直 和 水 平 的 轴线 构成 的 二 维 结构 ， 它 用 来 使 内 容 结 构 
化 。 当 使 用 得 体 时 ， 网 格 可 以 作为 设计 师 以 一 种 合理 的 、 自 觉 的 、 自 然 的 方 
式 组 织 文本 和 图 片 的 支架 。 它 是 看 不 见 的 灵魂 ， 它 会 产生 韵律 、 秩 序 和 连贯 ， 
它 经 常 被 设计 师 用 来 更 好 地 预见 信息 将 被 放置 在 哪里 ， 以 及 使 创意 变 得 理性 
化 。 当 图 像 元 素 必须 快速 而 有 序 地 合并 时 ， 也 可 以 使 用 网 格 。 平 面 设 计 中 ， 
网 格 表现 出 了 最 具 生 命 力 的 意志 。 























































































































































































































































































































































































































































































































































































































A simple sample page 
This sample page demonstrates a tiny fraction of what you get with Blueprint. 


Tia bon Ws sonet nih estar 

consectetur aspicing 
‘Anil timo tors sm Mov 
dolore magna aliqua. Ut enim ad minim veniam, 
is nostrud exercitation lameo laboris nisi ut 
aqui 


A Simple Sidebar 
























































Blueprint 是 许多 CSS 框架 中 的 一 种 , 它 使 设计 师 能 够 更 容易 地 使 用 网 格 开发 网 站 。 
与 此 类 似 的 还 有 Typogridphy ( 基于 960.gs ). YUI Grids 和 YAML。 

























































































不 设计 元 素 该 被 放置 在 哪里 是 靠 直 觉 来 决定 , 网 格 在 一 个 固定 的 二 维 结构 中 ， 
允许 元 素 精确 地 定位 ， 回 答 了 设计 元 素 或 文本 该 被 放 在 哪里 的 问题 。 网 格 ， 


































































































1 http://www.alistapart.com/articles/whitespace/。 
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多 设计 师 认为 它 是 内 容 之 前 的 先决 条 件 。 挑 战 是 在 内 容 将 被 构建 在 
网 格 和 内 容 的 主要 特征 之 间 找 到 合适 的 平衡 。 一 些 人 说 网 格 限制 了 创造 力 ， 
然而 另 一 些 人 把 它 当做 一 个 强大 的 框架 ， 它 可 以 让 设计 者 做 出 完美 、 精 确 和 
准确 的 设计 。 
当 基于 网 格 进行 设计 时 ， 设 计 者 通常 从 空白 画布 或 白 纸 开始 。 为 了 寻找 合适 
的 网 格 ， 他 们 使 用 了 一 般 的 布局 规则 和 公式 ( 比如 黄金 分 割 、 三 分 法 等 ) 来 
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把 白 纸 分 成 适宜 的 部 分 ， 选择 内 在 的 、 令 人 满意 的 页 面 和 分 栏 比例 。 最 
后 ， 通 过 对 外 边 距 进行 试验 来 创建 一 个 完美 的 、 动 态 的 排版 结构 。 剩 下 的 是 
内 容 来 填充 结构 ， 用 内 散在 网 格 中 的 严格 规则 来 限制 设计 。 


意思 的 是 ， 正 如 Mark Boulton 在 他 的 文章 “通过 简单 5 步 来 设计 网 格 系 





















































































































































































































































































































































































































































统 ” 中 陈述 的 那样 ," 作 为 结果 ， 这 样 的 尝试 意味 着 那些 被 设计 出 来 的 美丽 
事物 在 本 质 上 更 可 用 ”( 也 被 称 为 美学 可 用 性 效果 )。 一 个 平衡 的 构图 自然 在 
美学 上 更 令 人 喜欢 、 更 好 用 ， 更 能 引导 Divine Proportion: 1.618 

你 和 进行 沟通 。 





















































































































































( = 1.618 )， 是 彼此 相 邻 放置 的 事物 的 
度 比 值 。 它 也 被 称 为 Fibonacci 序列 。 960px : 1.618 = 593px 
个 比例 的 强大 之 处 在 于 ， 你 在 宇宙 的 960px - 593px = 367px 
个 角落 都 可 以 发 现 它 。 使 J 144) 割 的 布 局 构 冬 o 
考虑 上 面 的 例子 。 你 可 能 想 增加 布局 的 固定 宽度 。 布 局 宽度 是 960 像素 。 你 
想 要 大 块 的 内 容 ( «content» ) 和 小 块 的 边栏 ( <aside> ), 该 如 何 计算 栏目 的 宽度 ? 
。 首先 计算 «content» 版 块 的 宽度 。 确 保 版 块 和 整个 图 层 的 宽度 比例 为 
1.62。 因 此 ， 可 以 把 960px 除 以 1.62， 将 近似 得 到 593 像素 。 
。 从 图 层 整体 的 宽度 中 减 去 593 像素 ， 你 将 得 到 367 像素 。 


。 现 在 ， 如 果 计 算 <content> 版 块 、<aside> 版 块 的 比例 (593 像素 : 367 像 




















金 分 割 可 能 是 最 常用 的 网 格 布局 方 
式 。 为 了 给 访客 提供 一 个 令 人 满意 和 
觉 性 的 布局 ， 考 虑 一 下 纸张 的 分 割 方 593px 367px 
式 。 黄 金 分 割 是 等 于 1.618033988749895 ERES 
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1 http//www.markboulton.co.uk/journal/comments/simple steps to designing grids/s 
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X = 1.615 ) 与 容器 宽度 、 内 容 版 块 宽度 的 比例 ( 960 像素 : 593 像素 = 
1.618 )， 你 会 发 现 其 比例 差不多 都 是 相同 。 


这 就 是 黄金 分 割 背 后 的 思想 。 对 流动 和 弹性 布局 同样 
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当然 ， 你 不 必 遵循 黄金 分 割 。 连 贯 协 调 的 结构 ， 这 个 ea 


分 割 只 是 实现 它 的 一 种 方式 。 另 一 种 选择 是 流动 网 格 布局 ， 它 在 讲 布局 的 那 


一 章 已 经 讨论 过 













































































Yeeaahh! ... 


State of the Art 
Camera phones 




















Yeeaahh! 二 = 


State of the Art 
Camera Lib 
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使 用 或 者 不 使 用 网 格 : 一 个 美丽 的 基于 网 格 的 设计 ， 在 排版 上 化 费 苦 心 。 
Mark Boulton 和 Khoi Vinh 设计 ， 为 了 展示 “网 格 ， 妙 不 可 言 ”( http://www. 
subtraction.com/2007/03/18/oh-yeeaahh )。 
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众 妙 之 门 





36 ”垂直 节奏 


作为 排版 人 员 ,Robert Bringhurst 说 到 ， 排 版 中 的 空隙 ,如 同音 乐 中 的 节拍 "。 
它 是 无 限 可 分 的 ， 但 是 一 些 比 例 合 适 的 间隔 比 任意 数量 的 无 限 选 择 更 有 用 。 
在 音乐 中 ， 对 节拍 的 规则 使 用 构成 了 韵律 ; 在 排版 和 网 站 设计 中 ， 规 则 
地 使 用 空隙 引出 了 网 格 理论 和 垂直 节奏 理论 。 正 如 音乐 中 的 和 谐 可 以 通过 
一 定 比例 的 时 间 间 隔 获 得 ， 排 版 中 的 和 谐 可 以 通过 一 定 比例 的 空间 间隔 来 















































































































































































































































































































































QU Xy (E htte://wwemalstapart.com/d/settingtypeontheweb/exemple.grid.html 


Lorem ipsum dolor st amet El 











Lorem ipsum dolor sit amet 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat 


* Duis aute irure dolor in reprehenderit 

= in voluptate velit esse cillum dolore eu fugiat nulla pariatur 
‘= Excepteur sint occaecat cupidatat non proident. 

* suntin culpa qui officia deserunt mollit anim id est laborum. 


Consectetur adipisicing elit 


Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur, Excepteur sint 
occaecat cupidatat non proident, suntin culpa qui officia. 
deserunt mollit anim id est laborum. Ut enim ad minim 
veniam. 





Sed do eiusmod tempor incididunt 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat 


Duis aute irure dolor in reprehenderitin voluptate velit esse cillum dolorg.au fugat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia. 
deserunt mollit anim id est laborum. 















































Wilson Miner 的 “通过 基线 网 格 进行 网 站 的 排版 ”中 提 到 的 垂直 节奏 。 


为 了 理解 垂直 节奏 ， 想 象 一 下 经 典 的 布 满 线条 的 练习 本 。 每 条 线 ( 也 被 称 为 
基线 ) 彼此 等 距 。 如 果 文 字 正 好 位 于 基线 上 ， 意 味 着 每 一 行文 本 的 基线 正好 

性 一 行 的 基线 吻合 ， 这 时 可 以 说 设计 获得 了 连贯 的 垂直 平衡 。 这 不 仅 适 
于 主体 内 容 ， 也 适用 于 标题 、 脚 注 和 边 注 。 现 在 ， 如 果 我 们 把 画 好 线条 
放 在 布局 的 下 面 ， 把 它 当做 一 个 看 不 见 的 排列 文字 的 样式 指导 ， 你 就 获得 
布局 的 垂直 节奏 。 很 显然 ， 按 垂直 节奏 排列 的 文本 更 容易 扫 读 和 阅读 ， 
它们 似乎 “ 采 在 ”正确 的 位 置 上 。 
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1 http://www.alistapart.com/articles/settingtypeontheweb/. 
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维护 垂直 节奏 的 关键 是 行 高 , 换 句 话说 , 是 两 行 基线 之 间 的 距离 。 在 C5S 中， 
行 高 ( line-height ) 属性 基本 上 设 定 了 整个 文本 流 中 的 网 格 ， 给 用 户 发 出 ] 
一 个 看 不 见 的 提示 ， 以 便 他 们 能 够 顺畅 地 阅读 。 因 为 垂直 节奏 和 字体 大 小 有 
关 ， 使 用 相对 单位 em 值 作为 行 高 是 很 自然 的 。 一 个 好 的 副作用 是 维持 了 设 
计 中 页 面 布局 的 平衡 ， 而 不 用 管 所 用 字体 的 大 小 、 样 式 和 种 类 。 


为 了 维持 CS 中 垂直 节奏 ， 元 素 间 的 空隙 和 线条 间 的 空隙 需要 使 用 尺寸 相等 
的 基线 网 格 。 例 如 ， 如 果 使 用 18 像素 的 基线 网 格 ， 意 味 着 每 对 基线 之 间 将 
18 像素 ， 这 意味 着 线条 之 间 的 间距 也 应 相应 地 被 设置 成 18 像素 。 并 且 ， 
守 段 的 距离 也 应 被 设置 成 18 像素 ， 如 下 例 所 示 。 










































































































































































































































































































































































































































































































































































































































































font-family: Arial, sans-serif; 

font-size: 0.625em; 

/* The font-size is now 0.625 * 16px - 10px. */ 
line-height: 1.8em; 

/* The leading is now 18 pixels. */ 

j 


如 果 希 望 在 段落 之 间 留 一 条 空白 直线 ， 你 需要 定义 一 个 合适 的 外 边 距 ， 当 然 
它 要 和 基线 一 样 高 。 否 则 ， 段 落 将 不 会 “ 采 在 ”正确 的 位 置 上 。 














































































































p {margin-bottom: 1.5em; } 






































当然 ,你 可 以 通过 调整 垂直 空隙 以 提高 页 面 动态 效果 , 并 使 文本 流出 其 不 意 。 
然而 , 每 一 个 变 体 都 应 该 用 头脑 中 的 垂直 节奏 定义 , 并 以 行 高 为 基础 。 同 样 ， 

他 文本 元 素 ， 如 标题 、 脚 注 、 图 像 ( 这 也 是 文本 元 素 ? ) 和 图 像 标 题 等 应 
该 总 是 基本 行 高 的 倍数 。 这 种 关系 可 以 通过 以 下 公式 表述 。 
































































































































































































































































































































































































































基线 高 度 basic line-height ) + 字体 大 小 ( heading font size ) = 行 高 ( heading 
line height ) 

注意 ， 在 开发 过 程 中 ， 创 建 包 含 网 格 线 的 背景 图 片 会 起 到 很 大 的 作用 。 在 
实践 中 ， 3E E 节奏 i 不 总 是 可 以 实现 的 ， JE E- 1 Ah $8 (B 多 不 同 N J 冬 
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3.7 分 级 (Hierarchy ) 和 分 度 ( scale ) 众 妙 之 门 






































像 的 时 候 。 然 而 ， 它 仍然 是 一 个 值得 追求 的 目标 ， 对 改进 页 面 效 果 非 常 




































































帮助。 
Typographic scale 

srsiisassd ab ab ab ab ab ab ab ab 
传统 的 排版 分 度 。 


3.7 分 级 ( Hierarchy ) 和 分 度 ( scale ) 


个 版 式 都 需要 分 级 。 它 的 核心 是 ， 分 级 支持 通过 提供 关于 文本 结构 和 组 
织 的 视觉 线索 而 获得 清晰 度 。 分 级 定义 了 内 容 如 何 被 阅读 。 它 为 用 户 展示 了 
站 哪里 开始 阅读 和 到 哪里 停止 阅读 。 它 把 页 眉 和 正文 区 分 开 。 虽 然 通 过 文本 
块 的 颜色 可 以 在 页 眉 和 正文 间 产生 对 比 ， 分 级 则 通过 元 素 的 大 小 显示 出 它们 
的 不 同 。 分 级 在 使 布局 易于 扫 视 方面 起 到 了 重要 作用 ， 它 也 是 使 网 站 排版 变 
得 可 读 的 一 项 重要 技术 。 正 如 Jeff Croft 在 他 的 “优雅 的 网 页 排版 ”中 陈述 
的 那样 ， 传 统 意义 的 上 的 排版 由 分 度 组 成 。 一 个 版 式 中 字体 大 小 的 不 同 是 很 
意义 的 ， 理 解 这 一 点 很 有 帮助 。 为 了 在 排版 中 获得 良好 的 分 级 ， 需 要 使 用 
分 度 ， 下 面 是 传统 的 分 度 。 


6、7、8、9、10、11、12、14、16、18、21、24、36、48、60、72 


父 也 可 以 小 心 覆 翼 地 创建 自己 的 分 度 。 分 度 使 文字 和 谐 与 连贯 。 另 一 种 选 
择 是 ， 一 些 设计 者 倾向 于 在 定义 文本 和 标题 的 字体 大 小 时 使 用 Fibonacci 数 


1 


列 (比如: 16-24 - 40- 64 - 104 )。 
下 面 是 一 个 简单 的 关于 排版 尺度 的 例子 ， 在 CSS 中 定义 如 下 所 示 。 


body { 
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font-size: 0.625em; 





1 “Fibonacci 数列 是 一 个 特殊 的 数列 , 这 个 数列 从 第 三 项 开始 , 每 一 项 都 等 于 前 两 项 之 和 , 比如 : 16 + 24 = 40; 24+ 40 = 
64, 随 着 数列 项 数 的 增加 , 前 一 项 与 后 一 项 之 比 越 逼 近 黄 金 分 割 0.6180339887。 因为 它们 有 助 于 设计 者 达到 黄金 分 割 
它们 经 常 被 用 在 更 强调 审美 功能 的 设计 和 布局 中 。 
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/* 因为 浏览 器 的 默认 字体 大 小 是 16 像素 , 我 们 现在 要 把 页 
这 样 更 容易 计算 */ 


文字 大 小 降 到 10 像素 ， 


QU X A (htp/wwnigeorg/content.ctm/spenk-designers 


|| speak, Desioners — AIGA I the protem | +| 


























About | Membership Events | Competitions | News Jobs & Community | Loam 


| Design & Society & 


Professional N 
| Business Environment ritm 


Inspiration Be ay Education 


® = n x SEARCH AIGA 


FROM VOICE ~ TOPICS: advice. professional develooment 


Speak, Designers IN THIS SECTION 
by David Barringer | July 14, 2009 


© AIGA Publicatione and Design Prese 
have been asked to give a few talks this year, and I'm out of practice. So I called my mom. 
Whenever I need advice on concealed firearms, single-engine aircraft and public speaking, I 


call my mom. Mom is a voice instructor, firearms instructor, speech pathologist and student RELATED 
pilot. As might be expected from a woman who shoots wild boar for Thanksgiving dinner and Leadership Is THE Strategic Issue 
watches What Not to Wear with her granddaughter, Mom gave me very practical advice for Parson 

speakingin public. 


consider the role of design leaders, too. Parson 
"Breathe," she said. urges designers to see the world as CEOs do. 


“Ah,” I answered, steepling my fingers in prayer. "It's so simple.” Ready for Your Close-up? 
by Terry Lee Stone. 
But, no, there was more. Much more. My mother, Corinne Barringer, M.A., CCC-SLP, teaches Do some designers have all the luck or could. 
actors, pilots, corporate executives, professors, lawyers and many others. So she and I put there be a better reason why they're making 
together the following guide to public speaking for designers or anyone who doesn't spend Seer ae eee 
much time in front of an audience. ag "n 
How the Web Made Me a Better Copywriter 
One week before your talk by Cathy Curtis 
The way we read is constantly changing, and so 
DO A GRAVITY EXERCISE FOR BREATHING isthe way we write. Curtis articulates why this 
Deep breathing exercises are a good place to start, Lie on your back on a hard. ad 
surface, such as a carpeted floor. Do not lie on a bed, which is not firm enough. Canter for Practice Management 
Place one hand on your abdomen and the other on your chest. Inhale slowly to AIGA Center for Practice Management provides 
the count of three and exhale slowly to the count of five, While your count may vary, your resources to help designers with the day-to-day 
inhalation should be shorter than your exhalation. The hand on your chest should move ULL rea 
minimally, while your other hand should rise and fall with your abdomen as a result of air AIGA|Aquent Salary Survey 
moving in and out of the thoracic cavity. Relax your abdominal muscles duringinhalationand This annual survey offers the most 
contract them during exhalation. comprehensive document of compensation data 
for the communication design profession. 


BREATHE 


ARTICULATION DRILL, OR TONGUE TWISTERS 
AIGA Design Conference 200: 

‘situ! | Control, not speed, is the focus with tongue twisters. Pronounce the words poe E v ere e 

| DF | dearly. Try saying “red leather, yellow leather,” which isa popular oneamong takes on the dueling dynamics for designers as 
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AIGA 网 站 通过 对 颜色 、 字 体 大 小 和 行 高 的 巧妙 使 用 




















p { font-size: 1.4em; /* 14px */ ) 








hl ( font-size: 4.8em; /* */ j 


H 
œ 
je; 
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h2 { font-size: 3.6em; /* 36px */ } 
h3 { font-size: 2.4em; /* 24px */ } 
h4 { font-size: 2.1em; /* 21px */ } 


h5 { font-size: 1.8em; /* 18px */ } 











h6 { font-size: 1.6em; /* 16px */ } 
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3.8 段落 样式 众 妙 之 门 


当然 ， 要 在 设计 中 创建 一 个 合适 的 版 式 分 级 ， 你 不 必 把 自己 仅仅 限制 在 字体 
大 小 上 。 你 还 可 以 使 用 颜色 、 字 体 效 果 ( 比如 段 首 字 母 下 沉 、 大 写字 母 、 小 
型 大 写字 母 )、 和 斜体 和 其 他 的 选择 ， 来 为 用 户 提供 关于 页 面 内 容 结构 和 文本 
块 相对 重量 的 线索 。 


































































































































































































































































































段落 是 标记 ， 是 关于 思想 的 标记 。 版 式 设计 师 在 文本 流 中 ， 使 用 单线 边界 


( single-line boundaries )、 缩 进 (indents )、 段 标志 ( pilcrows ) 和 其 他 装饰 ， 
以 及 减少 缩 进 、 花 饰 字 母 ( 如 首 字 母 下 沉 ) 等 技巧 来 标记 段落 。 







































































































































































如 果 你 使 缩 进 ， 通常 的 建议 是 ， ER BST S 标题 段落 不 要 缩 进 。 根据 惯例 ， 
列表 和 引用 内 容 块 也 不 需要 缩 进 。 
单线 边界 是 现在 网 站 上 最 常用 的 段落 分 隔 符 ， 也 是 大 多 数 通 用 浏览 器 默认 设 
的 样式 。 总 体 来 说 ， 缩 进 仍 然 是 印刷 品 和 出 版 物 中 最 流行 的 段落 分 隔 符 。 
区 块 和 缩 进 的 一 些 规 约 ， 以 某 种 方式 见证 了 网 页 和 印刷 品 的 区 别 。 印 刷 的 成 
本 仍然 高 E Ps 但 是 网 站 的 成 本 却 不 再 时 什么 大 问题 。 毕竟 ， 可 性 = Dod 
站 版 式 优秀 与 否 的 唯一 衡量 标准 。 
你 可 以 通过 使 用 邻近 同 级 节点 选择 符 ( adjacent sibling selector ) 达到 这 个 效果 ， 
而 不 需要 使 用 大 量 的 标记 。 例 如 ， 如 果 你 已 经 为 段落 设 定 了 缩 进 。 




























































































































































































































































































































































































































































































p ( text-indent: 2.5em; ) 
































这 时 5 A J BR Aube 包含 f h1 到 h3 标题 的 段落 的 缩 进 ， 你 aj 以 这 样 设 o 





























hl + p, h2 + p, h3 + p { text-indent: 0; } 


需要 注意 的 是 ， 只 有 在 引用 内 容 块 和 缩 进 被 设置 成 和 外 挂 标点 (hanging 
punctuation ) 左 对 齐 时 ， 才 需要 这 样 做 。Robert Bringhurst 建议 , “如果 段 落 
J EE 适度 的 ， 考 虑 到 连贯 问题 ， 你 可 以 让 引文 使 用 相同 的 缩 进 。” 这 对 
I 站 上 的 列表 也 适用 。 在 这 两 种 情况 下 ， 需 要 用 边界 把 列表 和 引用 内 容 块 从 
] 赎 的 段落 中 分 离 出 来 。 
[有 的 浏览 器 都 能 很 好 地 支持 基本 的 段落 样式 。 然 而 复杂 的 花饰 字母 和 章 半 
可 能 会 引起 麻烦 。 一 些 浏览 器 对 诸如 伪 元 素 ( pseudo-elements ) 和 邻近 同 级 
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节点 选择 符 这 类 技术 的 支持 还 不 成 熟 。 开 发 者 为 正文 文本 选择 不 同 字 体 的 
] 也 同样 受到 限制 ， 同 时 跨 平台 和 跨 浏览 器 的 不 连贯 性 也 使 创意 和 精确 度 
到 影响 。 





















































KH GR 
































4. One em indent with boundary 


Much of the material for this volume was collected during the time that I was preparing for the press 
the Evolution of Woman, or while searching for data bearing on the subject of sex-specialization. While 
preparing that book for publication, it was my intention to include within it this branch of my 
investigation, but wishing to obtain certain facts relative to the foundations of religious belief and 
worship which were not accessible at that time, and knowing that considerable labor and patience would 
be required in securing these facts, I decided to publish the first part of the work, withholding for the 
time being that portion of it pertaining especially to the development of the God-idea. 


As mankind construct their own gods, or as the prevailing ideas of the unknowable reflect the inner 
consciousness of human beings, a trustworthy history of the growth of religions must correspond to the 
processes involved in the mental, moral, and social development of the individual and the nation. 


By means of data brought forward in these later times relative to the growth of the God-idea, it is 
observed that an independent chain of evidence has been produced in support of the facts recently set 
forth bearing upon the development of the two diverging lines of sexual demarcation. In other words, it 
has been found that sex is the fundamental fact not only in the operations of Nature but in the 
construction of a god. 


In the Evolution of Woman it has been shown that the peculiar inheritance of the two sexes, female 
and male, is the result of the bias given to these separate lines of development during the earliest 
periods of sex-differentiation; and, as this division of labor was a necessary step in the evolutionary 
processes, the rate of progress depended outdent-caply on the subsequent adjustment of these two 
primary elements or forces. A comprehensive study of prehistoric records shows that in an earlier age 
of existence upon the earth, at a time when woman's influence was in the ascendancy over that of man, 
human energy was directed by the altruistic characters which originated in and have been transmitted 
through the female; but after the decline of woman's power, all human institutions, customs, forms, and 
habits of thought are seen to reflect the egoistic qualities acquired by the male. 


英文 段落 的 样式 不 必 一 致 。 在 这 个 例子 中 ， 第 一 段 的 第 一 行 左 对 齐 ， 后 面 段 落 
的 第 一 行 有 1em 的 缩 进 ， 右 侧 未 对 齐 ， 形 成 了 V 型 边界 


































































































10. Drop cap (versal) with bold opening 


M uch of the material for this volume was collected during the time that I was 
preparing for the press the Evolution of Woman, or while searching for data bearing on the 
subject of sex-specialization. While preparing that book for publication, it was my intention to include 
within it this branch of my investigation, but wishing to obtain certain facts relative to the foundations 
of religious belief and worship which were not accessible at that time, and knowing that considerable 
labor and patience would be required in securing these facts, I decided to publish the first part of the 
work, withholding for the time being that portion of it pertaining especially to the development of the 
God-idea. 

As mankind construct their own gods, or as the prevailing ideas of the unknowable reflect the 
inner consciousness of human beings, a trustworthy history of the growth of religions must correspond 
to the processes involved in the mental, moral, and social development of the individual and the nation. 

By means of data brought forward in these later times relative to the growth of the God-idea, it is 
observed that an independent chain of evidence has been produced in support of the facts recently set 
forth bearing upon the development of the two diverging lines of sexual demarcation. In other words, it 
has been found that sex is the fundamental fact not only in the operations of Nature but in the 
construction of a god. 

Inthe Evolution of Woman it has been shown that the peculiar inheritance of the two sexes, 
female and male, is the result of the bias given to these separate lines of development during the 
earliest periods of sex-differentiation; and, as this division of labor was a necessary step in the 
evolutionary processes, the rate of progress depended outdent-caply on the subsequent adjustment of 
these two primary elements or forces. A comprehensive study of prehistoric records shows that in an 
earlier age of existence upon the earth, at a time when woman's influence was in the ascendancy over 
that of man, human energy was directed by the altruistic characters which originated in and have been 
transmitted through the female; but after the decline of woman's power, all human institutions, 
customs, forms, and habits of thought are seen to reflect the egoistic qualities acquired by the male. 


此 处 首 字母 下 沉 的 处 理 方式 没有 任何 垂直 校正 ， 段 落 也 没有 对 齐 ， 没 有 边界 。 


在 “网 站 排版 和 设 字 这 篇 文章 中 ，Jon Tan 对 你 可 以 在 设计 中 使 用 的 样式 
技巧 和 CSS 代码 进行 了 介绍 。 
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1 http://jontangerine.com/silo/typography/p/. 
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11. Outdent cap (versal) with bold small caps opening 
UCH OF THE MATERIAL FOR THIS VOLUME WAS COLLECTED DURING THE 
time that I was preparing for the press the Evolution of Woman, or while searching 


worship which were not accessible at that time, and knowing that considerable labor 
and patience would be required in securing these facts, I decided to publish the first 
part of the work, withholding for the time being that portion of it pertaining especially 
to the development of the God-idea. 

As mankind construct their own gods, or as the prevailing ideas of the unknowable 
reflect the inner consciousness of human beings a trustworthy history of the growth 
of religions must correspond to the gesceses faved a mental, moral, and 
‘al the indi 


the fundamental fact not only in the operations of Nature but in the construction of a 
god. 


In the Evolution of Woman it has been shown that the peculiar inheritance of the two 
sexes, female and male, is the result of the bias given to these separate lines of 
development during the earliest periods of sex-differentiation; and, as this division of 
labor was a necessary step in the evolutionary processes, the rate of progress 
depended outdent-caply on the subsequent adjustment of these two primary 
elements or forces. A comprehensive study of prehistoric records shows that in an 
earlier age of existence upon the earth, at a time when woman's influence was in the 
ascendancy over that of man, human energy was directed by the altruistic characters 
which originated in and have been transmitted through the female; but after the 
decline of woman's power, all human institutions, customs, forms, and habits of 
thought are seen to reflect the egoistic qualities acquired by the male. 


网 站 核心 字体 预览 。 


3.0 通过 字体 设 定 版 式 


嘟 些 想 创 建 一 个 丰富 的 、 真 正 跨 浏览 器 的 、 一 致 的 版 式 设计 的 设计 师 所 面 对 
的 诸多 限制 ， 是 现代 网 站 排版 中 最 让 人 恼火 的 地 方 。 因 为 操作 系统 预 装 的 字 
体 不 同 ， 很 难 预言 某 种 特殊 的 字体 是 否 会 在 用 户 的 显示 器 上 正常 显示 ， 或 是 
否 会 产生 排版 噪音 (typographic noise )， 导 致 文本 难以 阅读 、 布 局 难以 浏览 。 


当然 , 字体 选择 必须 被 限制 在 所 谓 的 “网 站 主流 字体 ”( Core Web fonts ) +, 
这 个 集合 由 10 种 在 1990~2000 年 间 设 计 的 字体 组 成 ， 作 为 网 站 的 标准 字体 
Alo 现在， 这 些 字体 被 默认 安装 在 了 全 世界 95% ALAN BA Al ub ats 
作为 设计 师 为 正文 选择 字体 的 首选 。 
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Andale Mono by Steve Matteson 

Arial by Robin Nicolas and Patricia Saunders 

Arial Black by Robin Nicholas and Patricia Saunders 

Comic Sans MS by Vincent Connare 

Courier New by Adrian Frutiger and Howard Kettler 
Georgia by Matthew Carter 

Impact hy Geoffrey Lee 

Times New Roman by Stanley Morison with Starling Burgess and Victor Lardent 
Trebuchet MS by Vincent Connare 

Verdana by Matthew Carter 





网 站 核心 字体 预览 。 
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这 些 字 体 是 Andale Mono (monospaced sans serif typeface)、Arial (sans serif)、 





Comic Sans MS (script). Courier New (monospaced slab serif)、Georgia(serif)、 
Impact (sans serif), Times New Roman (serif), Trebuchet MS (humanist sans 


serif), Verdana (humanist sans serif) 和 Webdings (dingbat). 


if HE t 3€, Palatino (Mac, old-style serif), Helvetica (sans serif), Lucida. Sans 





Unicode (sans serif), Tahoma (humanist sans serif) 和 Lucida Grande(humanist 


sans serif) 也 比较 流行 。 


Georgia, Verdana. certain Lucida fonts、Monaco、Trebuchet 和 Verdana 字 
体 是 为 屏幕 设计 的 ， 目 的 是 为 了 提高 网 站 文本 的 清晰 度 。 和 声名 显赫 的 
Times New Roman 一 起 ，Arial、Lucida、Georgia 和 Trebuchet 等 字体 在 26 像 
素 或 更 大 像素 时 效果 很 好 ， 很 适合 作为 正文 的 标题 。Verdana、Georgia、Lu- 
cida 和 Arial 通常 是 文本 块 使 用 的 字体 。 然 而 ， 在 大 多 数 情 况 下 仔细 考虑 文 
本 的 行 高 和 行 宽 是 非常 必要 的 。 仅 就 字体 而 言 ， 它 还 不 是 终极 解决 方案 。 


随 着 Windows Vista 和 Microsoft Office 2007 的 到 来 ， 微 软 引 入 了 ClearType 
Font Collection 2007， 在 包含 了 e 种 预 装 在 电脑 中 的 新 字体 ， 它 们 是 Calibri, 
Cambria、Candara、Consolas、Constantia 和 Corbel。 虽 然 并 没有 被 大 多 数 人 
更 用 ， 它 们 却 被 预 装 在 很 多 基于 Windows 系统 的 电脑 上 ， 也 可 以 被 安装 在 


和 
苹果 电脑 上 。 


很 多 软件 包 会 自动 预 装 一 些 字体 。 比 如 Office 2003 会 安装 100 种 额外 的 字体 。 
当然 ， 不 是 所 有 的 这 些 字体 都 特别 精致 ， 也 不 是 所 有 的 这 些 字体 都 适合 在 
网 站 上 使 用 。 然 而 它们 仍然 增加 了 你 的 选择 。 你 也 许 希 望 检查 一 下 Richard 
Rutter AS “FIRER” (Font Matrix )， 它 列 出 了 不 同 版 本 Mac 和 Windows, 
Windows Office 和 Adobe Creative Suite 中 打包 的 字体 。 
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3.10 CSS 字体 库 ( CSS Font Stacks ) 


虽然 安全 字体 的 选择 受到 了 限制 ， 你 不 必 仪 仅 使 用 那些 样式 表 里 的 字体 。 
CSS 字体 库 里 的 字体 ， 是 一 个 按 优先 顺序 排列 的 CSS 所 钟爱 的 字体 的 列表 ， 
你 可 以 告诉 用 户 浏览 器 在 这 个 列表 中 循环 ， 直 到 找到 一 个 安装 在 用 户 操作 系 
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1 http://24ways.org/2007/increase-your-font-stacks-with-font-matrix. 
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统 中 的 字体 ， 然 后 使 用 它 显示 任何 被 定义 的 文本 。 

















Most common fonts on all systems to 4 July 2009 


Platform and font name Installed (%) Sample Image 
% Microsoft Sans Serif 99.64% EE Sample Image 
% Verdana 98.34% i Sample Image 
3f Arial 98.01% 8 99999999 Sample Image 
% Arial Black 98.01% NEUE Sample Image 
courier New 97.84% Es Sample Image 
% Tahoma 97.84% ME Sample Image 


% Palatino Linotype 97.83% ME Sample Image 
38 Franklin Gothic Medium 97.63% EEEE Sample Image 





* Monaco 97.62% a Sample Image 
Lucida Console 97.599, a Sample Image 
3i Comic Sans MS 97.55% i Sample Image 
38 Impact 97.55% Es Sample Image 
3R Trebuchet MS 97.51% HUE Sample Image 
é courier 97.23% a Sample Image 
é Helvetica 97.03% Es Sample Image 
* Arial 96.83% i Sample Image 
% Lucida Sans Unicode 96.14% EE Sample Image 
fi Georgia 95.989 i! Sample Image 
Å URW Chancery L 95.86% ET Sample Image 
* Verdana 95.45% Ei Sample Image 
%® Sylfaen 95.39% ME Sample Image 
































所 有 系统 最 常用 的 字体 ， 来 自 Codestyle.org F 2009 年 11 月 公布 的 “联合 字体 
调查 结果 ”( Combined font survery results ) o 
例如 ， 如 果 你 想 用 Baskerville 字体 ， 可 以 把 它 和 作为 替换 的 字体 一 起 列 在 
CSS 字体 库 中 。 





































































































body { font-family: Baskerville, Times New Roman, Times, 

































































serif; 
} 
如 果 用 户 的 电脑 上 没有 安装 Baskerville 字体 ， 浏 览 器 会 检查 下 一 个 字体 ， 
就 是 Times New Roman 字体 ， 然 后 是 Times， 如 果 这 些 字体 都 没 安 装 ， 浏 览 
器 将 使 用 任意 一 个 衬 线 ( serif ) 字体 。 














正如 Nathan Ford 在 它 的 文章 “优化 css 字体 库 ”( Better CSS Font Stacks °) 
中 提 到 的 ， 当 你 选择 字体 库 的 时 候 ， 你 需要 首先 考虑 文本 的 上 下 文 。 一 些 字 
体 显示 正文 的 效果 较 好 ， 然 而 男 一 些 显示 标题 的 效果 较 好 。 考 虑 一 下 如 果 文 


1 http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml。 





























































































































? http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/。 
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本 元 素 是 标题 或 段 首 的 情况 。 总 体 来 说 ， 字 库 应 该 遵循 以 下 的 方案 。 

字体 名 称 : 理想 字体 、 替 代 字 体 、 一 般 字 体 、 通 用 字体 。 

作为 标题 最 理想 的 字体 ， 你 可 以 在 “安全 ”字体 外 探索 排版 的 可 能 性 。 很 多 

字体 具有 良好 的 市 场 渗透 力 ， 所 以 除非 你 选择 了 一 个 非常 不 常用 的 字体 ， 总 
比 用 户 会 青 欢 它 。 对 于 正文 字体 的 “理想 ”程度 ， 可 以 通过 它 适合 整个 

设计 的 程度 和 易 读 性 来 衡量 。 

标题 和 文本 块 的 “替换 字体 ”通常 和 “理想 字体 ”相似 ( 比如 字体 形状 )， 

EE 比 “ 理 想 字 体 ” 更 通用 ， 安 装 得 也 更 广泛 。 

“一 般 字 体 ” 和 前 两 者 类 似 ， 但 是 不 具 杂 的 特性 ， 通 常 比较 简单 也 比较 

普通 。 

最 后 ,“ 通 用 字体 ”是 在 前 面 所 有 字体 都 没有 被 安装 的 情况 下 的 选择 ， 它 将 

以 任意 通用 的 字体 显示 内 容 。 

下 面 是 标题 使 用 的 主流 字库 。 















































e Baskerville, “Palatino Linotype”, Times, Times New Roman ( 衬 线 ) 


Cambria, Georgia, Times, Times New Roman ( 衬 线 ) 


Franklin Gothic Medium, Arial Narrow Bold, Arial ( 无 衬 线 ) 


Futura, Century Gothic, AppleGothic ( 无 衬 线 ) 


Garamond, Hoefler Text, Palatino, Palatino Linotype ( 衬 线 ) 


Geneva, Verdana, Lucida Sans, Lucida Grande, Lucida Sans Unicode (无 


衬 线 ) 


Georgia, Times, Times New Roman ( 衬 线 ) 


Gillsans, Trebuchet, Calibri ( 无 衬 线 ) 


Helvetica, Helvetica Neue, Arial ( 无 衬 线 ) 


Lucida Sans, Lucida Grande, Lucida Sans Unicode ( 无 衬 线 ) 


Palatino , Palatino Linotype, Hoefler Text, Times, Times New Roman ( 衬 


线 Jo 
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jET SCHOOLED 


















































在 试验 中 ，Travis Gertz 使 用 了 不 同 的 CSS 字库 ， 来 为 用 户 提供 美丽 的 版 式 设计 。 
在 上 面 的 例子 中 ， 使 用 了 Helvetica Neue 作为 正文 的 字体 ，Baskerville 作为 日 期 、 
标题 和 引用 文本 块 的 字体 。 




















































































































。 Trebuchet, Tahoma, Arial ( 无 衬 线 ) 


e Verdana, Tahoma, Geneva ( 无 衬 线 ) 








下面 是 正文 使 用 的 流行 字库 。 












































e Arial, Helvetica Neue, Helvetica ( 无 衬 线 ) 

e Baskerville, Georgia, Cambria, Times, Times New Roman ( 衬 线 ) 
e Cambria, Georgia, Times, Times New Roman ( 衬 线 ) 

e Century Gothic, Apple Gothic ( 无 衬 线 ) 

e Consolas, Lucida Console, Monaco, monospace ( 无 衬 线 ) 

e Courier New, Courier, monospace ( 衬 线 ) 


e Futura, Century Gothic, AppleGothic ( 无 衬 线 ) 
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e Geneva, Lucida Sans, Lucida Grande , Lucida Sans Unicode, Verdana (无 
衬 线 ) 

在 他 的 试验 中 ，Travis Gertz 使 用 了 不 同 的 Css 字库 ， 来 为 用 户 提供 美丽 的 

版 式 设计 。 在 上 面 的 例子 中 ， 他 使 用 了 Helvetica Neue 作为 正文 的 字体 ， 

Baskerville 作为 日 期 、 标 题 和 引用 文本 块 的 字体 。 


仔细 考虑 字体 问题 可 以 预先 避免 很 多 问题 。 


当 你 定义 字体 库 时 ， 要 确保 你 选择 的 字体 不 会 太 罕见 ， 以 至 于 在 整个 设计 
替换 字体 和 一 般 字 体 也 无 法 正常 匹配 。 把 非常 不 同 的 字体 放 在 一 个 字体 库 
通常 不 是 一 个 很 好 的 主意 ， 因 为 字体 大 小 、 行 高 和 行 宽 的 不 同 可 能 会 使 正文 
和 标题 产生 令 人 吃惊 的 排版 效果 ， 甚 至 使 它们 变 得 不 易 阅 读 或 使 版 面 零 乱 。 
最 后 ， 你 需要 考虑 一 下 各 种 可 能 的 情况 ， 比 如 ， 你 的 标题 字体 库 中 第 二 个 字 
体 被 使 用 ， 而 你 的 正文 字体 库 中 第 三 个 字体 被 使 用 。 在 这 种 情况 下 文本 是 否 
是 连贯 可 读 的 ? 其 他 的 组 合 情 况 下 又 会 是 什么 样 ? 


仔细 考虑 字体 问题 可 以 预先 避免 很 多 问题 。 


3.11 文本 替换 技术 


虽然 “核心 网 站 字体 ”可 以 产生 连贯 的 、 平 台独 立 的 版 式 ， 一 些 设计 师 在 提 
共 一 些 非 常规 的 设计 方案 时 ， 倾 向 于 使 用 不 常见 的 字体 。 不 同 的 文本 替换 
技术 可 以 把 纯 文 本 替换 成 族 入 了 所 选 字体 的 图 片 或 动画 ， 并 把 它 展示 给 用 
户 一 一 特别 是 当 客 户 电脑 中 并 没有 这 些 字体 的 时 候 。 这 些 技术 通常 依 

户 端的 JavaScript 支持 或 服务 器 端的 脚本 来 现场 生成 能 入 字体 的 图 片 文 件 ， 
同时 它们 确保 内 容 对 大 多 数 用 户 而 言 是 容易 获取 并 便于 阅读 的 。 

总 体 来 说 ， 这 里 有 4 类 文本 替换 方案 。 


。 静态 图 片 蔡 换 : 这 种 技术 设计 师 仅 仅 把 要 鞭 换 的 文本 蔡 换 成 一 个 能 入 
文中 的 图 片 ， 同 时 保持 内 容 对 SEO 的 友好 性 。Radu、pPhark 和 Malar- 
key 图 片 蔡 换 法 推荐 使 用 大 的 外 边 距 、 字 母 空 除 和 文本 缩 进 ， 相 应 地 ， 
隐藏 文字 并 使 用 背景 属性 来 显示 蔡 代 图 片 。 注 意 ， 为 文本 内 容 〈 不 使 
用 上 文 描述 的 图 片 奉 换 技 术 ) 使 用 一 个 img 元 素 会 破坏 基于 语义 的 
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HTML 标记 ， 因 此 应 该 避免 。 


。 动态 图 片 替 换 : 这 种 技术 超越 了 静态 图 片 蔡 换 ,能够 通过 JavaScript ( 客 
PW) 或 PHP (服务 器 端 ) 自动 生成 图 片 。 设 计 师 把 字体 文件 上 传 到 
服务 器 上 ， 服 务 器 上 的 脚本 将 使 用 它 生成 图 片 并 替换 文本 。 使 用 这 种 
方法 的 技术 包括 Scalable Inline Image, Replacement, Dynamic Text Re- 


placement、 Facelift Image Replacement 和 Scalable Jens Image Replace- 











ment, 


。 动态 影片 替换 : 这 种 技术 依赖 于 包含 嵌入 字体 的 Flash 影片 。 这 些 影 
片 在 文本 需要 蔡 换 的 时 候 会 播放 umm == 
出 来 〈 比 如 使 用 ，sIFR )。 这 种 技 
术 的 优点 在 于 ， 文 本 可 以 被 选择 
并 被 复制 。 然 而 ， 这 种 技术 增加 | Meta Pro Book 
了 页 面 载 人 的 时 间 ， 并 且 要 求 用 | - 
户 浏览 器 必须 同时 支持 JavaScript 
和 Flash。 如 果 不 考虑 这 些 使 用 上 
的 严重 局 限 ，sIFR 可 能 是 最 受 欢 les z 
迎 的 网 站 文本 替换 技术 ， 因 为 ， 使 用 中 的 sIFR (Scalable Inman Flash 
它 有 大 量 的 插件 和 第 三 方 应 用 程 Replacement ): Meta Pro Book HE T 


一 个 Flash 影片 。 





















































X} 
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。 动态 画布 或 VML 替换 : 这 种 技术 包含 两 个 独立 的 部 分 ， 字 体 生 成 器 ， 
它 会 通过 使 用 VML 和 转换 引擎 ( 比如 Cufón ^ ,是 一 种 不 需要 任何 插件 ， 
具有 跨 浏 览 器 的 兼容 性 ， 并 且 快 得 无 与 伦比 的 技术 ) 把 字体 转化 成 专 
用 格式 的 文件 。 这 种 技术 的 优势 是 用 户 可 以 选择 并 复制 整个 页 面 的 文 
本 ,而 不 必 特 别 选 择 被 替换 的 文本 SIFR 和 其 他 技术 是 做 不 到 这 一 点 的 。 
另 一 个 例子 是 Typeface.js . 

不 管 你 选择 什么 技术 ， 即 使 用 户 的 电脑 中 没有 安装 Flash 和 JavaScript 或 在 

他 们 的 浏览 器 中 不 可 用 ， 也 要 确保 可 以 获取 内 容 并 且 可 读 。 静 态 图 片 替换 的 

主要 问题 是 获取 性 问题 。 动 态 奉 换 技 术 通常 会 增加 服务 器 载荷 ， 所 以 有 的 时 

















































































































































































































1 http://wiki.github.com/sorccu/cufon。 


? http://typeface.neocracy.orgo 
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候 需 要 一 些 缓存 。Cufon 和 sIFR 仍然 是 最 近 越 来 越 流行 的 技术 ; Cufón 通常 
要 比 sIFR 更 受 欢迎 ， 因 为 它 的 跨 平台 兼容 性 ， 并 且 它 属于 轻 量 级 技术 ， 虽 

































































大 它 的 配置 不 像 sIFR 那样 灵活 。 





























WEBLOG ENTRY 
Font Embedding Now 

mav or, 2009 

Currently one of the biggest stumbling blocks to embedded type on the web is of 


a legal nature rather than any genuine technological barrier. Most of the major 
browsers have now implemented the à Iont- [ace property. and between HER and 
typefaces to 


While countless other opinions have come out in favour of both addressing and 
Janoring these concerns. 


But this is relly for the foundries and the browsers to figure out. What you or | 


‘our own methods and expectations is in order. And maybe a little voting with our 
pocketbooks. 


Designers — myself included — are hoping for a wide open playing field; that's not 






































Dave Shea 对 Cufón 的 使 用 : 正文 更 加 雅致 ， 阅 读 起 来 更 加 舒服 。 








3.12 @font-face 属性 


吏 用 文 oe 费时 并 且 显 得 不 自然 ， 因 为 设计 师 必 须 把 
字体 嵌入 到 Flash 中 ， 或 者 使 用 服务 器 端的 类 库 生 成 散 入 版 面 的 图 片 。 这 些 
技 



















































































































































































术 的 不 利 方面 是 ， 它 们 通常 依赖 浏览 器 对 JavaScript 的 支持 ， 这 在 实际 
民 难 控制 。 很 显然 ， 使 用 纯 css 对 本 地 字体 的 支持 将 会 是 一 个 更 可 取 、 更 自 
然 的 解决 方案 。 这 正 是 CSS3 网 站 字体 模块 @font-face E'l 
更 用 @font-face 岁入 字体 要 通过 两 步 完 成 。 第 一 步 是 把 一 个 新 的 字体 加 入 样 
式 表 中 的 可 用 字体 列表 。 这 通过 使 用 @font-face 属性 完成 。 


























































































































































































































































































































@font-face { 
font-family: MuseoSans; 


src: url('fonts/museo sans.otf') format ("opentype"); 


E 
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font-weight: bold; 


j 










































































在 这 个 例子 中 ， 设 计 师 声明 Museo Sans 是 一 种 用 来 在 浏览 器 中 显示 文本 的 
可 用 的 字体 。 接 下 来 的 第 二 步 , 是 设 定 一 个 文本 元 素 , 使 用 刚才 声明 的 字体 ， 
我 们 在 常规 的 Css 声明 中 使 用 字体 ， 如 下 所 示 。 


hi ( 








































































































Font-family: MuseoSans, Arial, sans-serif; 


j 
































浏览 器 将 会 载 入 museo, sans.otf 字体 文件 ， 并 用 它 来 显示 hi 标题 。 如 果 浏 
览 器 不 支持 Gfont-face 属性 ， 它 就 会 被 忽略 。 要 注意 只 有 可 以 免费 获取 的 字 
体 才 会 被 上 传 到 服务 器 ， 因 为 这 些 文件 不 仅仅 对 浏览 器 开放 , 也 对 用 户 开 放 ， 
户 可 以 从 服务 器 下 载 这 些 字体 文件 。 字 体 的 使 用 协议 需要 清晰 地 表述 ， 该 
字体 可 以 被 使 用 


















































































































































































































































Œ @font-face JS 





TX 


工 o 


P typekit 


© Selectors (6) 


Ga) 


eser mi he 


Welcome! Here's how to use fonts: 

In the left column, use the Selectors section to apply fonts to any 
HTML tag, class, or id. You can also add the default class to your 
Preceding) Cumt ,tal markup. Then, click publish to see those changes on your site. 
Mintroduction „one p 


© Weights & Styles 


doesn support @font-Face: 


Georgia. Times, s (Save) 


Publish 















































Typekit 是 一 种 简单 的 解决 方案 ， 它 提供 仅 限 于 网 站 使 用 的 字体 使 用 协议 的 链接 ， 
允许 你 在 布局 中 鹃 入 商业 字体 ( 图 片 由 Andy Clarke 提供 )。 




















































































































还 可 以 选择 Typekit “或 Fontdeck ， 这 两 个 服务 提供 了 一 种 简单 的 解决 方案 ， 











1 http://blog.typekit.com/2009/05/27/introducing-typekit/。 


? http://ilovetypography.com/2009/08/07/the-font-as-service/ 。 
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它们 通过 提供 仅 限 于 网 站 使 用 的 字体 使 用 协议 的 链接 ， 人 允许 你 在 布局 中 舱 入 商 
业 字 体 。 字 体 文件 ， 或 者 某 种 字体 不 同 重量 的 字形 ， 被 存储 在 第 三 方 的 服务 器 
上 ， 设 计 者 向 Typekit 提交 租用 ( 而 非 购买 ) 协议 。 关 于 付费 ， 设 计 者 会 被 给 
个 包含 在 页 面 上 的 JavaScript 文件 ， 它 可 以 和 简单 的 Css 一 同 使 用 。 


3.13 ”选择 正确 的 字体 


超过 一 千 种 字体 可 供 选择 ， 要 为 某 个 特殊 的 目的 选择 正确 的 字体 似乎 是 一 个 
让 人 望 而 生 里 的 工作 。 最 常见 的 错误 是 选择 漂亮 的 字体 ， 一 些 字体 看 上 去 很 
吸引 力 ， 人 们 因为 形式 而 忽略 了 功能 。 这 相当 于 本 未 倒置。 虽然 这 听 起 来 
点 奇怪 ， 但 是 字体 的 “外 观 ”应 该 是 你 最 后 考虑 的 事情 。 但 是 ， 如 果 外 观 
那么 重要 ， 那 我 们 的 决定 该 以 什么 作为 依据 呢 ? 最 重要 的 标准 是 字体 的 
上 下 文 ， 以 及 使 用 字体 的 目的 。 
考虑 上 下 文 和 故事 本 身 

在 开始 选择 字体 和 布局 的 细节 性 操作 之 前 ， 如 果 有 可 能 要 通读 一 下 文本 。 字 休 


的 选择 和 它 的 展示 方式 要 由 文本 的 意义 决定 ， 这 似乎 是 显而易见 的 。 然 而 ， 这 
也 有 一 个 显而易见 的 问题 。 在 互联 网 时 代 , 我 们 经 常 要 处 理 两 类 不 同 的 文本 内 容 。 
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规定 性 内 容 ， 这 是 我 们 知道 并 且 喜 爱 的 一 类 内 容 。 设 计 师 在 开始 设计 之 前 已 
经 获悉 文本 的 内 容 和 含义 。 读 者 可 以 从 头 到 尾 把 内 容 读 完 ， 并 在 阅读 过 程 : 
获得 启 LL 

































































突 发 性 内 容 : 这 类 内 容 在 设计 完成 后 才 会 产生 。 想 一 下 社交 网 络 ， 每 个 人 都 
参与 内 容 的 构建 ， 或 者 是 包含 CMS 或 Blog 引擎 的 网 站 ， 在 它们 会 不 断 产 生 
新 的 内 容 。 读 者 可 能 会 快速 浏览 内 容 ， 在 页 面 内 容 间 进 行 跳跃 ， 并 在 这 个 过 
FRU 言 息 ， 在 那些 吸引 他 们 注意 力 的 地 方 停 下 目光 。 

对 于 规定 性 内 容 ， 我 们 可 以 提前 阅读 ， 理 解 它 的 含义 、 语 气 和 微妙 之 处 ， 我 
们 可 以 以 此 为 根据 选择 相应 的 字体 。 但 是 对 于 那些 突 发 性 内 容 该 怎么 办 呢 ? 
当然 ， 我 们 可 以 尽 我 们 的 所 能 。 看 一 下 品牌 和 环境 。 设 想 一 下 文字 出 现 的 上 
下 文 。 选 择 一 种 能 够 丰富 内 容 的 字体 ， 它 最 好 能 够 融入 背景 而 不 是 为 了 吸引 
注意 力 而 显得 突 元 。 
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实际 上 每 个 字体 设计 师 都 是 按 严格 定义 的 标准 和 特殊 的 功能 来 创造 一 种 字 
体 。 而 网 站 设计 师 应 该 在 选择 字体 之 前 认识 到 它 的 功能 。 在 字体 系列 的 一 端 
是 可 以 以 任何 大 小 显示 、 并 适用 于 任何 恶劣 条 件 的 高 负荷 字体 ( 登山 鞋 )， 
在 另 一 端 是 展示 字体 ( 舞 鞋 )。 


高 负荷 字体 有 稳健 的 特性 。 通 常 容易 辨识 、 较 大 的 字体 空间 、 固 定 的 衬 线 、 
清晰 的 对 比 、 较 高 的 x-height F028 B8] ( 边 角 处 防止 墨水 外 溢 的 密闭 的 区 域 )。 
外 溢 问 题 出 现在 网 站 上 不 算 什么 问题 ， 但 是 其 他 的 因素 却 在 起 作用 。 展 
加 雅致 ， 字 形 上 有 更 多 的 选择 。 这 是 一 个 处 于 很 多 对 立 的 极端 之 间 
字体 是 出 于 特殊 的 目的 而 被 设计 出 来 的 。 处 于 中 间 

体 非 常 重要 ， 它 们 既 适 用 于 常规 的 文本 ， 也 适合 标题 。 
展示 字体 更 灵活 。 在 某 种 程度 上 ， 一 个 人 可 以 穿 登山 鞋 参加 盛 
VAC ELAR, EMAAR, IHRE TAMA, 
体 作 为 标题 看 上 去 也 可 以 接受 ， 前 提 你 调整 它们 的 空隙 ， 并 把 
正确 的 设计 元 素 一 同 使 用 。 但 是 ， 你 不 应 该 穿 舞 鞋 去 登山 。 当 然 ， 你 


可 以 , 但 是 你 这 样 做 了 之 后 不 要 器。 同样 , 永远 不 要 在 正文 中 使 用 展示 字体 。 
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Marko Dugonjic 的 Typetester 是 一 个 流行 的 在 线 应 用 程序 ， 它 人 允许 你 测试 不 同 的 
字体 、 行 高 和 行 宽 在 显示 器 上 的 显示 效果 ， 并 允许 你 选择 最 好 的 一 个 。 
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3.15 ”尺寸 很 重要 


当然 ， 上 述 的 很 多 字体 必须 处 理 尺 寸 问 题 。 随 着 可 拉 伸 数字 化 字体 的 到 来 ， 
王 何 字 体 的 任何 尺寸 都 可 以 使 用 ， 以 往 耗 时 的 字号 调整 过 程 已 经 被 抛弃 了 。 
百 果 是 很 多 设计 因为 这 种 便利 而 受害 。 一 些 展 示 字 体 在 小 号 时 太 过 于 华丽 或 
脆弱 ， 用 来 显示 文本 的 字体 在 被 放大 导 过 于 笨拙 。 
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虽然 它们 看 起 来 相似 ， 文 本 字体 和 展示 字体 在 放大 后 显示 出 了 很 多 不 同 。 















































字体 大 小 的 优化 不 仅 对 印刷 品 很 重要 。 当 为 显示 器 进行 设计 时 ， 类 似 的 问题 
也 会 出 现 。 笔 画 的 浓度 和 像素 的 大 小 是 关键 的 。 当 字体 太 小 、 线 宽 低 于 一 个 
像素 的 时 候 ， 精 致 的 字形 将 会 断裂 ， 衬 线 的 边际 将 会 消失 。 如 果 字 体 的 主体 
没有 占据 足够 多 的 像素 ，x-height 较 低 的 字体 将 变 得 难以 阅读 ， 会 产生 不 合 
规范 的 或 复杂 的 图 形 、 关 闭 的 围 白 和 排列 过 紧 的 字母 。 























































































































































































































3.16 OpenType, TrueType 还 是 PostScriptType ? 


现在 数字 化 的 字体 有 3 种 可 供 选择 的 格式 : OpenType. PostScript Type 1 和 
TrueType。 这 可 能 点 混乱 。 了 解 文件 的 格式 是 否 和 你 将 要 使 用 的 软件 兼 
容 是 非常 重要 的 事情 。 
总 体 来 说 ， 如 果 你 在 使 用 现代 图 形 编辑 软件 ， 使 用 Opentype 格式 的 
字体 几乎 不 会 遇 到 任何 问题 。 两 个 主要 的 优点 是 跨 平台 兼容 性 ( 你 可 以 在 
Mac, Windows 和 其 他 操作 系统 上 使 用 相同 的 字体 )、 支 持 扩展 字符 集 和 布 
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局 特征 。 它 们 提供 丰富 的 语言 支持 和 高 级 的 排 
版 控制 。 现 在 ,所 有 Adobe 的 应 用 程序 InDesign、 
Illustrator, Photoshop 等 ) 都 提供 对 OpenType 
的 高 级 支持 ,比如 自动 蔡 换 替代 字形 自动 连 字 、 
小 型 大 写字 母 和 swaches 字形 和 古旧 风格 (old- M. 

style ) 特征 。 aso avalaie slots 上 38839 available slots 

ty 7 a 

3k X&, OpenType 字体 可 以 和 PostScript Type 1 和 可 M wa qud 
TrueType 字体 一 同安 装 和 使 用 。 因 为 这 些 字体 OpenType 字体 文件 可 以 包 
于 OpenType 特有 的 表格 ， 那 些 在 Mac OSX 和 Win- 含 2562 或 65536 种 字形 。 
dows 2000 以 前 的 系统 上 不 兼容 的 应 用 程序 在 没有 ATM 系统 服务 的 前 提 下 是 无 法 
使 用 它们 的 。 即 使 在 最 新 的 电脑 和 最 新 的 操作 系统 上 ， 一 些 程序 仍然 是 落后 的 。 


3.16.1 你 在 追求 什么 : 家 常 便 饭 还 是 美味 大 餐 ? 
字体 不 仅仅 只 包含 你 在 键盘 上 看 到 的 那些 符号 。 除 了 字母 表 、 数 字 和 各 类 标 
点 之 外 ,大 量 字体 也 包含 一 系列 “隐藏 的 ” 字符。 它们 可 以 通过 Shiff 4 (  ) 
选择 键 或 通过 特殊 的 菜单 获取 。 标 准 字 符 集 里 面 大 概 有 250 种 字形 ， 它 们 足 
够 用 来 满足 显示 和 基本 文本 使 用 的 需要 。 然 而 ， 正 如 在 一 家 高 档 餐厅 中 你 不 
可 能 只 点 汉堡 和 暮 条 ， 好 的 版 面 需要 的 会 更 多 一 点 。 如 果 你 正 考虑 为 某 种 专 
业 的 版 面 选 择 字体 ， 确 保 可 以 保证 以 下 这 些 额外 的 特征 。 
比如 ， 小 型 大 写字 体 ( 也 被 称 为 small caps ) 要 比 x-height 高 一 点 。 它 们 
字母 缩写 和 避免 把 全 部 字体 都 变 成 大 写 时 使 用 ， 这 会 在 文本 中 非常 显眼 。 它 
门 也 可 以 用 来 突出 内 容 或 作为 章节 、 段 落 的 首 字 母 或 首 行 。 微 型 大 写字 母 会 
更 小 一 些 ， 和 x-height 的 高 度 差不多 。 一 些 设计 师 使 用 它们 来 进行 排版 试验 ， 
比如 进行 混合 大 小 写 设置 ( 同时 包含 大 写 和 小 写 ), 也 被 称 为 统一 大 小 写 设置 。 
标准 的 字体 通常 有 一 个 字符 集 ， 然 而 不 同 的 排版 会 要 求 不 同 的 风格 。 符 合 上 
列 的 突出 字符 会 和 运行 文本 很 好 地 融合 ， 符 合 比例 的 衬 垫 字符 适合 任意 大 / 
写 的 文本 ; 平坦 的 字符 适合 设置 表格 和 数字 计算 器 ， 上 标 和 下 标 字符 适合 
在 分 数 和 科学 文本 中 。 最 后 一 类 文本 不 仅 需要 上 标 字符 和 下 标 字 符 ， 它 还 需 
要 特殊 的 数学 符号 和 很 多 种 类 的 括号 。 


当选 择 一 个 合适 的 字体 时 ， 要 确保 字体 是 完整 的 ， 同 时 包括 你 在 设计 中 需要 的 全 
部 字形 。 比 如 , 一 些 廉价 的 字体 可 能 不 包括 德语 的 元 音符 号 (8,6, 0) 和 R 字符。 
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实际 上 ， 当 字符 主体 的 一 部 分 伸 入 到 下 一 个 字符 的 范围 内 时 ， 就 有 必要 使 
连 字 。 很 多 数字 化 字体 仅仅 包括 受 限 的 “f” 连 字 ， 这 是 不 够 的 。 一 个 
扩展 的 连 字 确保 了 任何 扩展 的 连 字 字符 都 会 有 优雅 的 外 形 。 一 些 字 体 设 计 包 
含 了 非常 不 常用 的 连 字 ， 经 常会 添加 一 些 swoosh 字符 到 字体 中 。swoosh 字 
符 可 以 被 添加 到 swash 字体 中 ， 作 为 大 写 首 字母 、 首 字母 或 尾 字 母 。 
在 购买 字体 之 前 要 仔细 地 看 看 字体 。 分 析 一 下 这 个 字体 的 家 族 ， 仔 细 考 虑 它 
的 字形 在 放大 的 时 候 的 样子 ( 100~150 点 )。 也 要 看 一 下 字体 家 族 不 同 的 成 
员 在 你 通常 使 用 的 尺寸 下 的 外 观 。 它 们 的 斜体 容易 阅读 么 ? 小 型 大 写字 母 足 
够 清晰 么 ? 黑体 和 和 斜体 放 在 一 块 效果 如 何 ? 向 “rococo” 这 样 的 词 是 否 容 易 
阅读 ?在 单词 “lolo” 中 是 否 可 以 区 分 0 ( 零 ) 和 0o (小 写字 母 o )? 在 “floria” 























































































































































































































































































































































































































































































































和 “Eigenschaft” 中 的 连 字 情况 如 何 ? 
A QUALTY CONTENT & 


“Don’t ihsert too many wacky signifiers!" 


The Official Guide 
t TYPE Selection. 


THE UNABRLIGED VERSION 23/4 
* FEBRUARY 28", 2009 &* 


Extended ligature set Small caps Lining figures 
Discretionary ligatures Swashes Oldstyle numerals 
Capital ligatures Superscript characters ictions 












































专业 的 排版 需要 呈现 大 型 小 写字 母 、 很 多 的 数字 集 、 扩 展 连 字 集 、 不 同 种 类 的 
专业 字形 ， 包 含 蔡 代 字 符 和 swash 字符 也 无 大 碍 。 上 图 是 Capsa 专家 字体 。 


















































3.16.2 ” 衬 线 还 是 无 衬 线 ?3 …… 或 者 monospace 或 cursive ? 
时 下 正在 进行 的 关于 衬 线 和 无 衬 线 的 争论 不 得 不 涉及 清晰 度 问 题 。 双 方 都 
言辞 激烈 的 支持 者 。 随 着 屏幕 尺寸 、 分 辨 率 和 像素 密度 的 增加 ， 关 于 毛 边 较 
少 的 无 衬 线 字 体会 增加 清晰 度 的 论据 失去 了 一 些 优势 。 像 Host Hochuli TEC HE 
版 细节 )( Detail in typography ) 一 书 中 展示 的 那样 , 衬 线 字 体 可 能 更 容易 阅读 ， 
而 且 很 多 人 对 它们 的 熟悉 程度 ， 以 及 对 网 上 通常 使 用 的 字体 的 依恋 ， 不 管 怎 
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3.16 OpenType, TrueType i& PostScript Type ? 众 妙 之 门 
















































































































































































样 都 会 使 这 些 字 体 更 容易 阅读 。 即 使 专门 为 显示 器 设计 的 字体 在 跨 平 台 方 面 
会 遇 到 困难 。 在 一 台 显 示 器 清晰 易 读 的 字体 在 另 一 全 显示 器 上 可 能 会 有 所 

^ Bjo 

考虑 到 清晰 度 ， 在 为 显示 器 选择 字体 时 这 里 有 一 些 关 键 的 参考 因素 。 

































































































































































熟悉 的 字母 样式 。 选 择 大 家 熟悉 的 样式 。 避 免 使 用 那些 打破 常规 的 “奇异 ” 
字体 。 永 远 不 要 把 正文 全 部 设置 成 大 写 或 全 部 使 用 小 型 大 写字 母 ， 要 注意 冬 
体 字 (italic) RE (oblique ) 和 其 他 变 体 。 比 如 ， 升 部 和 降 部 对 清晰 度 
非常 重要 。 在 选择 字体 时 ， 要 选择 “b”、“d” 这 类 字母 的 升 部 高 于 xheight, 
以 及 “p、“q” 这 类 字母 的 降 部 低 于 x-height 的 字体 。 


选择 为 显示 器 设计 的 字体 : 很 多 字体 并 非 为 显示 器 设计 ， 甚 至 在 设计 时 没有 
进行 过 优化 。 如 果 一 个 字体 的 线条 没有 被 很 好 地 设计 , 显示 时 就 会 出 现 问题 。 
比如 ， 当 字号 很 小 时 ， 大 写字 母 “A” 中 间 的 横 杠 就 会 消失 ， 其 他 衬 线 和 精 
致 的 字形 也 会 消失 。 


选择 真实 的 字体 而 不 是 合成 的 字体 :仔细 考虑 一 下 那些 你 想 用 的 字体 的 可 
字形 。 很 多 通用 的 字体 仪 仅 有 正体 、 粗 体 、 和 斜体 和 粗 体 斜 体 可 用 。 不 管 提供 
什么 样 的 风格 变 体 ， 都 需要 专门 的 设计 。 


浏览 器 可 以 合成 字体 : 一 个 典型 的 例子 就 是 合成 斜体 字 ， 更 确切 地 说 是 倾斜 
F ( 在 不 改变 字母 形状 的 前 提 下 ， 把 正体 倾斜 一 定 角度 ， 来 模仿 真正 的 斜体 
字 )。 那 个 苹果 电脑 上 无 处 不 在 的 、 由 Charles Bigelow 和 Kris Holmes 设计 的 
Lucida Grande 字体 根本 没有 斜体 样式 。 然 而 ， 这 并 不 会 阻 上 人 们 通过 CSS 展 
现 出 斜体 样式 。 浏 览 器 会 合成 它 ， 但 是 看 起 来 很 糟糕 。 小 型 大 e 
个 例子 ， 没 有 一 个 核心 的 网 站 字体 包含 它 。 然 而 ， 我 们 有 时 会 采用 合成 的 方 
式 。 技 巧 是 避免 使 用 合成 字体 ， 根 据 你 的 判断 力 来 判断 什么 e 
什么 这 样 做 。 
充裕 的 x-height。 这 是 与 整个 字体 高 度 相 比 ,基线 和 小 写字 母 “x” ( 由 此 命名 ) 
顶端 的 距离 。 一 个 充裕 的 x-height 对 于 清晰 度 是 很 重要 的 ， 尤 其 是 对 显示 器 
而 言 。Georgia 和 Verdana 是 专门 为 显示 器 设计 的 字体 ， 它 们 都 有 较 充 裕 的 
x-heighto 
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让 人 舒服 的 字母 间距 :， 可 以 通过 CSS 的 letter-spacing 属性 调整 字母 间距 ; 
个 已 经 具 好 间距 的 字体 是 一 个 非常 好 的 出 发 点 。 


让 人 舒服 的 单词 间距 : 这 是 单词 间 的 空 阶 。 它 可 以 通过 css 调整， 但 是 即使 
不 调整 也 应 该 看 起 来 很 舒服 。 


3.16.3 ”美丽 的 字体 就 是 它 想 要 的 东西 

在 全 部 其 他 条 件 都 满足 的 情况 下 , 最 后 可 以 选择 你 认为 视觉 效果 最 好 的 字体 。 
但 是 你 现在 知道 ， 这 实际 上 是 整个 选择 过 程 中 的 最 后 一 步 。 理 解 前 面 的 步 又 
的 重要 性 是 至 关 重要 的 。 选 择 一 个 真正 满足 要 求 的 字体 要 比 一 个 仅仅 看 起 来 
漂亮 的 字体 更 有 意义 。 你 要 传达 的 消息 将 可 能 会 被 误解 ， 除 非 字 体 在 你 的 操 
作 系统 上 表现 良好 、 适 用 于 所 有 需要 展示 的 语言 、 有 完整 的 字符 集 、 是 一 个 
大 的 字体 家 族 中 的 一 员 、 能 够 正确 地 激发 氛围 和 符合 文化 内 涵 。 
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3.16.4 互补 将 令 你 无 所 不 能 
合成 字体 是 一 门 艺术 。 如 果 没 有 足够 好 的 理由 ， 请 尽量 少 使 用 它 

师 反 复 使 用 相同 的 字体 ， 依 赖 于 每 种 字 不 同 的 变 体 变换 风格 。 甚 至 更 多 
人 仅仅 依靠 几 种 字体 ， 而 不 管 他 们 下 载 了 多 少 字体 ， 因 为 这 几 包 

戎 难 的 可 信 的 朋友 。 这 对 网 站 也 适用 。 
在 不 远 的 将 来 ， 我 们 可 能 会 有 成 千 上 万 种 可 供 使 用 的 字体 ， 但 是 使 用 那些 人 
见 人 爱 和 被 广泛 理解 的 字体 家 族 ， 可 以 避免 犯错 误 。 
把 衬 线 字体 和 无 衬 线 字体 混合 使 用 是 一 包 
们 的 时 候 ， 主 要 要 [匹配 x-height。 














































































































































































































































































































































































































混合 使 用 它 
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好 的 方 Io 在 
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Georgia Verdana . 
Matthew Carter 设计 的 Georgia 和 Verdana 字体 ， 在 相同 尺寸 时 的 显示 效果 。 
Verdana 似乎 大 一 些 。 





















































Georgia Verdana 一 
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George 和 尺寸 略 小 的 Verdana 字体。 它们 的 x-height 相 匹 配 ,看 起 来 似乎 一 样 大 。 


就 像 色 相 环 上 的 互补 色 一 样 ， 字 体 也 存在 互补 关系 。 然 而 ， 要 小 心 处 理 。 某 
些 特定 字体 间 的 对 比 可 能 会 像 蓝 色 和 黄色 的 对 比 那样 刺眼 。 


要 记 住 ， 电 脑 显示 器 会 产生 比 一 般 印 刷 品 更 大 的 对 比 度 。 因 此 ， 很 多 设计 
倾向 于 在 白色 背景 上 使 用 灰 黑 色 ( off-black ) 而 不 是 纯 黑色 (pure black ) 。 
同样 ， 在 黑色 背景 上 使 用 亮 灰 色 (light gray) 代替 纯 和 白色 (pure white ) 也 
会 产生 更 好 的 视觉 效果 。 为 了 通过 css 获得 高 质量 的 排版 效果 ,“ 所 有 的 视 
觉 区 别 要 尽 可 能 地 细微 ， 但 是 仍然 要 清晰 而 且 显著 "。 


兴 试 同 种 字体 不 同 的 风格 是 一 个 出 发 点 。 在 标题 中 使 用 粗 体 字 ， 在 副标题 
和 更 用 小 型 大 写字 母 或 大 写字 母 ， 下 一 级 副标题 中 使 用 斜体 字 ， 在 正文 中 使 
正体 字 。 通 过 实验 确定 正确 的 页 面 元 素 的 分 级 。 
如 果 你 没有 对 你 的 字库 进行 大 量 实验 ， 要 注意 字体 的 基线 在 不 同 的 平台 的 变 
化 。 你 可 能 以 为 Helvetica Neue 和 Arial 字体 会 有 相同 的 基线 ， 但 实际 上 并 非 
如 此 。 在 Windows 系统 上 使 用 Arial 字体 看 一 个 页 面 和 在 Mac OS X 系统 上 使 
j Helvetica 字体 看 一 个 页 面 的 不 同 之 处 ， 会 使 网 格 的 对 齐 显 得 倾斜 。 


3.17 ”注意 细节 


现在 让 我 们 来 考虑 一 下 关键 的 排版 理念 、 术 语 、 最 佳 实践 和 实际 的 建议 ， 计 
我 们 从 不 同 视角 来 看 一 下 排版 。 为 了 获得 美丽 的 、 丰 满 的 和 印象 深刻 的 版 式 ， 
需要 创建 格式 正确 、 谨 慎 编 写 的 内 容 。 这 就 是 ， 如 果 你 想 留 下 深刻 的 印象 ， 
你 需要 润色 你 的 作品 ,对 那些 微小 的 排版 细节 给 予 足够 的 重视 。 


zii31031JL 
" E13" ( widow ) 就 是 在 段落 未 尾 的 一 个 单独 的 短 行 或 一 个 单独 的 词 。 “PUL” 
就 是 在 一 个 分 栏 的 开头 或 结尾 的 一 个 单词 或 短 行 ， 它 被 从 段落 的 其 他 部 分 分 
Bw. “Ba” F JUL PAT RRO, FT TES, BOR 
了 可 读 性 。 它 们 可 以 通过 调整 字体 大 小 、 行 宽 、 行 高 、 单 词 间距 和 字母 间 吕 
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1 Jeff Croft, “Elegant Web Typography”( 优 雅 的 网 站 排版 ) o 
? Edward Tufte, “Visual Explanations”( 视 觉 解释 ) 。 
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或 手动 加 入 换行 符 来 避免 。 
RW, SSPRAHAN ARES “BE” A MIL’. MIE 
JQuery 5484 jQWidon’ t 3 Typogrify WordPress 插件 ， 它 们 会 在 文本 块 最 
后 两 个 词 之 间 加 入 一 个 不 换行 空白 ( &nbsp; ) o 


































































































Good 

Lorem ipsum dolor sit amet, consectetur egestas massa vulputate nisl mauri. 
lout adipiscing elit. Integer posuere orci Suspendisse magna tellus, 

quis ligula. Donec egestas massa faucibus, sodales, vehicula eget. 
vulputate nisl. Curabitur venenatis. 

dolor sit amet antetut mauris. Lorem ipsum dolor sit amet, consectetur 


lout adipiscing elit. Integer posuere orci 
Nulla ac odio. Praesent bibendum justo id quis ligula. Donec egestas massa vulputa 





posuere orci quis ligula massa vulputate nisl. Curabitur venenatis nullam. 

Bad 

Lorem ipsum dolor sit amet, consectetur dapibus sodales, vehicula eget. 

lout adipiscing elit. Integer posuere orci 

quis ligula. Donec egestas massa atheis Lorem ipsum dolor sit amet, consectetur 
vulputate nisl. Curabitur venenatis aerues lout adipiscing elit. Integer posuere orci 
mauris. quis ligula. Donec egestas massa 


vulputate nisl. Curabitur venenatis. 
Nulla ac odio. Praesent bibendum justo id Nullam egestas facilisis antetut. 
mauris. Suspendisse magna tellus, 


“SUL” 3n "Sei" AEH ES 


3.18 ”对 齐 和 连 字 符 


在 排列 没有 对 齐 的 文本 块 时 ， 要 确保 使 碎片 ( 没有 对 齐 的 边缘 ) 平衡 ， 不 要 
产生 任何 突 元 的 孔洞 或 难看 的 形状 。 一 个 坏 的 碎片 可 以 扰乱 视线 并 分 散 
的 注意 力 。 一 个 好 的 碎片 有 一 个 柔和 的 非 整 齐 的 边缘 , 没有 一 行 太 长 或 太 短 。 
没有 办 法 通过 CSS 控制 它 ， 所 以 你 必须 通过 手动 调整 来 达到 好 的 效果 。 
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1 http://blog.hamstu.com/2007/05/31/web-typography-just-got-better/. 
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Good 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer 
posuere orci quis ligula. Donec egestas massa vulputate nisl. 
Curabitur venenatis. Nullam egestas facilisis ante. Suspendisse 
tincidunt. Etiam vitae leo id mauris laoreet luctus. Cum sociis 
natoque penatibus et magnis dis parturient montes, nascetur 
ridiculus mus. Nulla ac odio. Praesent bibendum justo id mauris. 





Bad 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer 
posuere orci quis ligula. Donec egestas massa id mauris. 
Curabitur venenatis. Nullam egestas facilisis ante. Suspendisse 
tincidunt. Etiam vitae leo id mauris laoreet luctus. 

Natoque penatibus et magnis dis parturient montes, nascetur 
ridiculus mus. Nulla ac odio. 




































































要 确保 使 碎片 ( 没有 对 齐 的 边缘 ) 平衡 ,不 要 产生 任何 突 元 的 孔洞 或 难看 的 形状 。 


另 一 个 解决 方案 将 会 自动 断 字 和 对 齐 。 现 在 ， 虽 然 现代 的 浏览 器 只 有 非常 简 
单 的 断 字 机 制 ， 并 且 不 支持 印刷 品 设计 中 复杂 的 对 齐 。 显 示 环 境 的 许多 变量 
设置 使 你 无 法 手动 设置 断 字 。 比 如 ， 使 用 软 连 字符 ( &#173; )。 


在 网 站 上 ， 两 边 对 齐 的 文本 通常 比 左 对 齐 的 文本 更 难 阅读 和 扫 读 。 些 
服务 器 端 和 客户 端 具 有 自动 连 字 的 解决 方案 ， 比 如 ，phpHyphenator 和 Hy- 
phenator。 牢 记 ， 对 齐 的 文本 使 用 衬 线 字 体 要 比 使 用 无 衬 线 字 体 效 果 好 ， 在 
比较 窄 的 行 宽 下 效果 最 好 。 


3.18.1 突出 

在 没有 打扰 读者 的 情况 下 突出 单词 是 很 重要 的 。 和 斜体 字 通 常 被 认为 是 突出 单 
词 的 最 好 的 形式 。 其 他 通用 的 突出 形式 有 粗 体 、 大 写 、 小 型 大 写 、 字 号 、 颜 
色 和 不 同 的 字体 。 不 管 你 选择 t4, 要 尽力 民 制 你 a J 种 Ao 也 就 
说 ， 把 大 写 、 粗 体 和 和 斜体 混用 ， 将 会 产生 不 连贯 的 效果 ， 看 起 来 很 笨拙 。 
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这 里 些 使 用 CSS 进行 突出 的 不 同方 式 ( 牢记 ，font-variant style 仅仅 在 
字体 支持 small-caps 变量 时 才 有 效 )。 
































span { 


font-style: italic; 
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j 

hi { 

font-weight: bold; 

j 

h2 ( 

text-transform: uppercase; 


} 


3.48.2 ”标点 外 伸 









































优秀 的 排版 会 把 引号 、 括 号 、 数 字 拉 伸 到 文本 流 的 外 边 。 缩 进 的 括号 会 打 断 





























文本 流 。 通 过 标点 外 伸 , 文本 和 引用 

















4B 











容 可 以 被 突出 

















显得 









































E 文 文本 的 外 边 距 


U 





在 你 的 CSS 中 ， 确 保 外 伸 的 标点 在 1 















































Good 

“ Lorem ipsum dolor sit amet, consectetur atse 

adipiscing elit. Integer posuere orci quis ligula. 
Donec egestas massa vulputate nisl. Curabitur 
venenatis, Nullam luoi egestas facilisis ante. " 


Bad 

* Lorem ipsum dolor sit amet, consectetur atse 
adipiscing elit. Integer posuere orci quis ligula. 
Donec egestas massa vulputate nisl. Curabitur 
venenatis. Nullam luoi egestas facilisis ante. " 











CSS 的 text-indent 属性 一 个 负 值 ( 当然 ， 这 个 取决 于 字 











更 加 精致 和 易 读 。 





之 外 。 对 于 引号 ， 给 





体 的 大 小 )。 











一 个 关于 好 的 引号 和 不 好 的 引号 展示 的 例子 。 把 引号 外 人 

















过 外， 这样 视觉 韵律 不 会 被 打 断 。 








blockquote { 
text-indent: -0.8em; 


font-size: 12px; 

















到 正 


CSC ARAN DEB 


众 妙 之 门 


































































































} 

为 了 让 有 序列 表 (o) 和 无 序列 表 (ul) 达到 同样 的 效果 ， 使 用 list-style- 
position 属性 ， 来 把 ee es 拉 到 左边 。 几 乎 所 有 主流 浏览 器 都 支持 
这 项 技术 。 

ul, ol { 


list-style-position: outside; 
} 


在 人 们 浏览 页 面 时 , 缩 进 的 列表 可 以 唤起 人 们 采取 行动 。 如 果 你 在 使 用 缩 进 ， 
要 确保 你 是 在 为 某 种 目的 而 有 意 地 使 用 它 。 


3.48.3 ”有 格式 的 和 号 ( & ) 


和 号 通常 是 一 系列 的 弯曲 ， 不 同 字体 之 间 的 显示 效果 各 不 相同 。 在 CSS 
尔 可 以 为 它 选择 一 种 特殊 的 字体 。 B “使 用 最 好 用 的 


和 
Use the Best Available Ampersand ) 的 文章 ， 提 出 了 通过 设 定 可 供 选 
择 的 字体 家 族 ， 这 趣 效 的 方式 来 选择 最 佳 的 和 号 。 
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Handcrafted pixels & text from Salem, Massachusetts. 


LATEST FROM THE NOTEBOOK RECENT WORK 


Text Rotation with CSS Reser 
n ample that works In safari, Firefox and EI 
Eu 






OUR PROJECTS 


aor 
hm 

















在 Simplebit 的 标语 中 有 一 个 美丽 精致 的 “&"。 











(X)HTML: 
«p»pixels «span class="amp">&amp;</span> text</p> 


CSS: 





'  http://simplebits.com/notebook/2008/08/14/ampersands.html. 
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span { 


font-family: Baskerville, Palatino, "Book Antiqua", 


serif; 
font-style: italic; 


} 


3.18.4 不 要 用 连 字 符 代替 em 破 折 号 ( em dash ) 


如 果 你 不 想 打 断 自己 ， 使 用 一 个 em 破 折 号 ( &#8212; )， 而 不 要 使 用 一 对 连 
字符 ( -- )。 这 是 无 数 的 编辑 最 常 抱怨 的 问题 。 



















































































3.18.5 不 要 错误 使 用 引号 


































































































































































































应 该 “这 样 ”使 用 引号 ( 引号 要 像 66 和 99 )， 而 不 要 ”这 样 ”使 用 。 开 引 
号 和 关 引 号 是 不 同 的 。 请 注意 引号 的 选择 会 因 语 言 而 异 。 对 于 美国 英语 ， 引 

内 容 通常 被 双 引 号 包围 ， 然 而 和 芯 套 引号 使 用 单 引 号 。 对 于 英国 英语 ， 以 下 
两 种 方式 都 可 以 : 先是 双 引 号 然后 是 单 引号 ， 或 者 先是 单 引 号 然后 是 双 引 号 。 






































































































































t css 中， 你 可 以 使 用 :lang pseudo-class 调整 引号 的 外 形 。 














:lang(en-us)»q ( 





quotes: "X201c" "4201d" "42018" "42019" 
j 

:lang(en-gb)»q { 

quotes: "X2018" "42019" "\201c" "\201d"; 
j 


岗 代 浏 览 器 支持 这 种 样式 ， 所 以 它 被 强烈 推荐 用 来 在 不 同 地 域 间 智 能 地 使 
j 引号， 同时 避免 所 谓 的 哑 引 号 (dumb quotes )。 比 如 ， 在 阿拉 伯 语 、 荷 
兰 语 和 德语 中 引号 是 , 这 样 “( 看 起 来 像 99 和 66 ) 的 ， 在 俄语 、 法 语 和 意 
大 利 语 中 « 这 样 ”的 引号 更 常用 。 























HH 










































































































































































1 当然 即使 是 , IE8 也 不 支持 它 , 虽然 它 注意 到 了 这 个 元 素 。 为 了 避免 引号 编码 问题 , 添加 数字 值 是 很 重要 的 。 
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3.18.6 ”句子 之 闻 不 要 使 用 两 倍 的 空格 

在 句子 间 使 用 两 倍 空格 是 过 时 方式 , 由 于 网 站 排版 的 方式 最 后 可 能 会 被 消除 。 
就 在 几 年 以 前 ,要 犯 这 个 过 失 需 要 手动 地 插入 一 个 空白 的 Ascll 空白 码 。 ME, 
在 你 允许 的 情况 下 ， 一 些 内 容 管理 系统 实际 上 将 会 格式 化 内 容 以 产生 双 倍 空 
格 。 不 要 给 它们 这 个 机 会 ! 在 句子 之 间 使 用 单 倍 空格 。 


3.18.7 ”必要 时 使 用 重音 符 

虽然 重音 符 在 HTML 中 很 难 录 入 ， 但 这 些 非 标准 的 字符 是 很 重要 的 礼节 和 表 
示 尊 重 的 方式 。 很 多 表格 列 出 了 字符 实体 ， 包 括 维基 百科 EAB, RO 
以 酌情 参考 。 


3.18.8 ”把 文本 当做 一 种 用 户 界 面 
界面 上 的 文字 选择 极其 重要 ， 它 可 以 构成 或 打 乱 网 站 的 功能 性 。 样 式 不 合适 
















































































































































































































































































































































































































































































的 字符 对 于 用 户 将 要 进行 的 交互 不 能 提供 任何 指示 。 
作为 内 容 的 文本 作为 U1 的 文本 
Ez] cameronmoll LE] cameronmoll 


Location: Utah A 
Member Since: August 17, 2005 ee eee 


| spend my free time bird 


Designer, speaker, wannabe drummer. watching. . 
quilting, and playing the occasional ping pong game. When faced with Sed ut Designer, speaker, wannabe drummer. I spend 
perspiciatis unde omnis iste natus error sit accusanbum. quiting, and playing the occasional ping pong g 
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ilo perspiciatis unde omnis iste natus error sit vol 


inventore veritatis et quasi... [read more] doloremque Laudantium, totam rem aperiam, eaque 
m more] 


Interests: Web design, web development, media production, 
entrepreneurship, branding, marketing, positioning, podcasting, analytics, Interests: Vieb design. web development, media production, 
software development. etin 














Cameron Moll 在 他 那 篇 名 为 “9 种 技巧 来 区 分 好 的 设计 师 和 伟大 的 设计 师 ”( Nine 
skills that separate good from great designers ) Bx Wit T EX SA PS 
可 来 处 理 的 重要 性 。 


义 上 图 片 “ 将 文字 作为 内 容 ” 和 “把 文字 作为 用 户 界面 ”进行 了 对 比 。 左 例 






































































































































































































































是 没有 栅 格 化 的 文本 ， 而 右边 的 文本 起 到 了 用 户 界面 的 功能 。 注 意 文 本 颜色 
[重量 的 不 同 ， 以 及 段落 间 、 行 之 间 和 链接 之 间 足 够 的 空白 ， 它 们 很 突出 、 






























































F 
而 且 容易 辨识 。 














1 http;//en.wikipedia.org/wiki/List of XML and HTML character entity references, 


? http://www.cameronmoll.com/archives/001266.html, 
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如 果 你 想 要 内 容 在 传达 意义 的 同时 来 体现 功能 性 ， 以 便于 帮助 用 户 理解 他 们 
该 如 何 通过 文本 达到 目标 ， 你 就 必须 包含 此 类 微妙 的 视觉 线索 。 











































































































3.18.9 引文 
引文 可 以 突出 节选 的 文本 。 它 们 通常 用 于 声明 之 中 ， 有 时 候 用 在 博客 的 评论 













































































， 最 重要 的 是 它们 会 被 用 在 段落 文本 中 。 然 而 ， 并 不 是 所 有 的 引文 都 是 相 
司 的 。 节 选 引文 ( pull quote) 直接 从 页 图 节选 文本 内 容 ， 它 会 从 内 容 
文本 流 中 拉 出 一 部 分 文本 ， 并 且 把 它们 在 页 面 显著 的 位 现 以 吸引 用 户 
的 注意 力 。 
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Typographic diversity 


July 29 2009 





D1iveL- 


Last week FontShop asked Twitter users to name their favorite 
underused typeface. 


[4 6 There will always be a place for classic type in contemporary 
design, and it’s safe and easy to rely on the same old 
standards, but using type that is underused is often the best 
way to stand out in an increasingly crowded and 
homogeneous design landscape. ?? 


Read more... FILED UNDER 





Typography 


























Idsgn.org 块 生动 的 区 块 ( block quote ) 引文 。 


























正如 节选 引文 一 样 ， 区 块 引 文 ( block quote， 更 确切 地 说 是 block quota- 
tions ), 被 当做 独立 的 段落 或 区 块 而 从 正文 中 分 离 出 来 6 和 节选 引文 不 同 的 是 ， 
它们 包含 一 篇 不 在 页 面 内 容 之 内 、 来 自 额 外 的 资源 的 文章 。 区 块 引 文通 常 被 
之 内 。" 常规 ”引文 引用 其 他 资源 的 内 容 ， 并 且 和 正文 










































































































































































设 定 在 正文 文本 流 之 内 。 
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本 流 融 合 ， 而 不 是 分 离 。 









































根据 HTML 的 标准 ， 有 3 个 元 素 可 以 用 来 表示 引用 内 容 : <blockquote>, <q> 
和 <cite>。 虽 然 它 们 都 用 来 标记 引文 ， 每 一 个 都 有 不 同 的 含义 和 不 同 的 用 途 。 


。 一 个 区 块 引 文 标记 <blockquote> 用 来 标记 相对 较 长 的 引文 ， 这 是 脱离 
正文 的 一 大 段 内 容 。 这 些 文本 通常 来 自 外 部 的 资源 ， 也 可 以 参考 以 前 
的 文章 。 

。 <q> JEDER REB HIR LC 


«p»Andrew answered <q>fonts</q>, but Steven said 

























































































<q>typefaces</q></p> 



























































虽然 它 很 少 被 使 用 ， 但 是 它 有 一 些 有 用 的 属性 。 比 如 ， 你 可 以 通过 使 用 CSS 
f£ <q> 元 素 的 内 部 调整 引文 的 外 观 。 这 是 非常 有 的， X| 7g ^f [e] 的 语言 个 
同 的 引号 形式 ( 可 以 参考 上 文 “ 不 要 使 用 哑 的 引号 ” 那 一 节 )。 

。 最后，<cite> 定义 了 一 种 内 和 藤 的 引用 或 参考 其 他 资源 的 格式 。 


<p>But then <cite>Andrew</cite> said <q>No, I think 



























































































































































these fonts work better</q>.</p> 
































号 、 线 条 、 缩 进 、 引 用 的 图 像 、 对 话 框 、 气 泡 提示 个 设计 师 
可 以 采用 多 种 方式 来 创建 美丽 的 、 值 得 记忆 的 引文 。 设 计 方 案 因 颜色 、 形 式 
不 同 而 不 同 。 不 同 的 技术 产生 不 同 的 效果 。 然 而 ， 有 一 点 是 很 重要 
的 ， 对 访客 而 言 ， 引 文 必 须 确实 像 引 文 ， 否 则 它 将 变 成 难以 琢磨 的 内 容 。 同 
样 ， 节 俭 地 使 用 引文 ， 它 们 应 该 扮演 配角 ， 来 支持 正文 内 容 ， 而 没有 其 他 的 
3 途 。 它 们 应 该 有 令 人 愉悦 的 变化 ， 而 不 是 千篇一律 。 


然 看 上 去 很 漂亮 ， 节 选 引文 有 内 在 的 问题 ， 它 们 被 放 在 HTML 内 容 的 中 间 。 























































































































































































































































































































































































































对 于 那些 通过 支持 CSS 的 浏览 器 来 浏览 页 面 的 用 户 来 说 ， 一 切 可 能 都 非常 令 
人 满意 。 但 是 对 于 那些 使 用 不 支持 CSS 的 浏览 器 或 阅读 器 的 用 户 而 言 ， 节 选 
引文 会 出 现在 正文 的 中 间 。 一 段 引 文 突然 出 现在 两 个 段落 之 间 ， 但 是 并 没 丰 
把 它们 连接 起 来 ， 这 将 会 打 断 文本 流 并 使 用 户 迷 惑 


如 果 你 的 内 容 包 含 节选 引文 ， 为 那些 误 入 歧途 的 用 户 提 供 一 点 额外 的 信息 1 
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排版 : 原则 、 








V = 88 智 的 j 


选择 。 在 
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方针 和 常见 错误 
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可 以 包含 











在 引文 的 开 鼠 





(X)HTML 











AR 





4A 











加 上 “节选 引文 





aa”, pan 
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其 至 可 以 








类 似 于 “跳跃 导航 ” 
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整个 节 


3.18.10 
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Hx 











选 引文 继续 六 
连 字符 和 特殊 符号 


后 ， 我 们 将 介 要 的 排版 符号 、 它 们 的 作 





EZAR 





4-H RE 








特殊 的 文本 由 


3.18.11 


MESA 
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( hyphen ,- ) E 


的 优秀 实践 。 

















的 排版 符号 。 这 
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连接 。 连 


字符 不 是 减 号 


FE 引文 结 
( Skip navigation ) 的 





a 





du s 


^ 


ne 





T 

plici 
E 
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过 CSS 进行 


隐藏 ， 








“ 


D5 








MEER" o DR 








链接 来 帮 
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处 理 





高 级 排版 和 











硬 连 字 符 用 来 在 单词 中 换行 并 连接 单词 
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出 现在 文本 行 的 末端 ， 
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AKT 


个 单词 在 下 
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可 以 对 身 
o KIE 





Bis xtfT4 AUT 





字符 ( 88173; 
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是 指 这 个 连 
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REN B 




















fj Å 失 ， 


HE, 
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Buy 
FEL 








即使 7 








如 果 整 个 单 
全 被 连接 的 词 出 















































在 连 字符 ; 





还 必 ma 
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硬 连 字符 
en 破 折 号 
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2: 

















uU. 





这 个 连 字 


符 必 须 总 
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GR. "HR" ETE 

















如 self-respect )o 





不 至 的 是 ， 现 




















n dash ) 比 半 个 em 破 折 号 要 长 。 
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数字 、 比 赛 





00-3:00 p.m. 
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一 个 em 破 折 号 有 
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HTML 实体 
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lem. CHS 
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Wr (| was debugging the style sheet — wait a second; 


what was he saying about IE6? )。 

| "&8212;" Ro 7 

破 折 号 可 以 被 一 
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em 破 折 号 























i] 
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来 指示 
分 和 页 码 
( Meyer-Stevenson 
J "&8211;" 





- hy 


4S 


连 字符 、 











在 HTML 实 














区 间 , EE 如 A 




















phen 


en dash 


em dash 


en 破 折 号 和 


em 破 折 号 。 











JJ 


HE A 





主意 ， 在 破 折 号 








比如 ， em 











周 








个 thin space ( &#8201; ) 




















或 一 个 hair space 





&#8202; ) © 


1 也 可 以 看 一 人 Jon Tan 的 “排版 空隙 设计 套件 ”(http://jontangerine.com/silo/typography/spaces/) 它 包含 不 同类 型 


的 排版 空间 的 一 系列 

















例子 , 通过 使 用 核心 网 站 字体 在 





94 


户 代理 和 操作 系统 之 间 进 行 了 对 比 。 


3.18 ”对齐 和 连 字符 众 妙 之 门 



























































































































































































































































卷曲 的 单 引号 或 双 引 号 开始 符号 不 是 用 来 表示 英尺 或 英寸 的 正确 符号 。 一 个 
单个 的 度量 单位 会 被 用 来 表示 英 i ( &#8242; 在 HTML4.01 中 不 被 支 
持 )， 用 一 个 成 双 的 度量 单位 来 表示 英寸 或 秒 ( &#8243; 在 HTML4.01 中 不 被 
XB. 

为 了 表示 引 语 中 省 略 的 词语 或 者 思路 的 减弱 使 用 省 略 号 (ellipse, 

















888230; )、 而 不 是 三 个 连续 的 句号 (periods )。 三 个 句号 并 不 是 省 略 号 。 这 
时 一 个 常见 的 错误 ， 因 为 它们 看 起 来 太 像 了 ， 但 在 语义 上 它们 是 不 同 的 。 


总 之 ， 这 里 有 一 个 排版 中 最 常 使 用 的 符号 的 参考 表格 。 使 用 数字 的 Unicode 
的 参考 是 一 个 很 好 的 方法 ， 因 为 非 数字 的 Unicode 可 能 不 能 被 正常 解码 ( 例 
如 ， 命 名 实体 被 限制 在 一 个 DID 中 ， 它 并 不 总 是 会 进行 翻译 ， 所 以 一 个 RSS 
解码 器 对 它 进行 解码 时 可 能 会 产生 问题 )。 
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& 和 号 (8838;) : 通常 在 正规 笔 语 、 编 程 语 言 等 中 有 很 多 用 途 。 
© 版 权 符号 (&H169;) 

x 注册 商标 符号 (8474;) 

S 章节 号 (88167; : 当 使 用 两 次 时 ( $ § ) 意味 着 “章节 ”。 
i HS (&#39;) 

'' *" 3 引号 (&#8216; &#8217; &#8220; &#8221;) 

x 乘 号 (&#215;) 

度数 (&#176)) 

Va 四 分 之 一 (&#188)) 

Vy (&#189;) 

y, (&#190;) 

ho 于 分 号 (&#8240;) 

€ 欧元 号 (&#8364;) 








1 http://people.w3.org/~dom/archives/2005/04/named-versus-numeric-entities/. 
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HERR: 原则 、 方 针 和 常见 错误 





省 略 号 (&#8232;) 





= En 破 折 号 (&#8211;) 





























= Em RTS (&#8212;) : 用 来 表示 思路 的 突然 停顿 。 

















— KES (848213; : 用 来 引入 引文 。 















































BAT: 这 不 是 符号 ， 什 么 都 不 是 ， 只 是 一 个 空白 空间 。 但 是 你 可 以 用 它 来 
制造 不 同 ， 尤 其 是 在 排版 中 。 














































































































质 上 ， 排 版 是 一 个 进行 简单 、 有 效 交 流 的 有 力 媒介 。 在 网 上 ， 排 版 可 以 赋 
容 ， 把 无 生命 的 数据 块 ， 变 成 活 的、 优雅 的 对 话 。 但 是 你 必须 仔细 
排版 细节 ， 不 仅仅 是 字体 和 展现 它 的 上 下 文 ， 还 有 行 宽 、 行 高 、 
非 版 辅助 工具 ， 比 如 网 格 和 垂直 节奏 为 产生 和 谐 的 布局 

通过 它们 ， 版 式 可 以 呼吸 并 满足 它 的 目的 。 


正常 的 段落 格式 、 合 理 地 使 用 空白 和 排版 分 级 以 及 缩放 ， 可 以 改进 文本 的 结 

， 使 它 更 易 被 浏览 和 阅读 。 不 仅 如 此 ， 还 要 密切 注意 正文 的 质量 ， 包 括 标 
符号 、 空 白 符号 和 特殊 符号 ， 这 有 助 于 提升 阅读 体验 ， 并 对 整个 设计 的 可 
J 民 大 的 影响 。 因 为 网 站 排版 即 是 与 用 户 进行 交流 ， 你 最 好 确保 对 话 是 
丰富 的 、 有 意义 的 ， 这 样 用 户 才 会 欣赏 它 。 
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现代 网 站 的 可 用 性 原则 

















设计 一 个 可 用 性 强 的 网 站 ， 对 任何 一 个 设计 者 来 说 都 不 失 为 一 个 雄心 勃勃 的 
标 。 为 了 完成 这 一 目标 ， 作 为 有 经 验 的 设计 师 ， 我 们 采取 的 每 一 步 都 应 该 
各 我 们 的 网 站 更 加 接近 用 户 的 预期 ， 这 是 一 个 缓慢 的 过 程 。 我 们 现在 采用 逐 
步 递增 的 方式 实现 并 测试 我 们 的 设计 ， 直 到 我 们 达到 这 个 整体 目标 。 这 与 过 
去 网 站 和 网 络 应 用 的 设计 方式 有 所 不 同 。 

一 般 来 说 ， 在 网 站 设计 、 开 发 和 发 布 后 ， 可 用 性 专家 会 帮助 网 站 的 主人 使 网 
站 的 界面 达到 用 户 的 预期 。 在 网 站 发 布 后 发 现 界面 错误 ， 通 常 是 一 件 极其 精 
糕 的 事情 。 在 这 个 阶段 修复 界面 错误 ， 代 价 可 能 是 高 昂 的 。 因 此 ， 把 可 用 性 
的 操作 知识 铭记 在 心 ， 分 阶段 设计 、 及 早 测试 和 经 常 测试 是 非常 重要 的 。 
记 住 ， 在 大 多 数 情况 下 ， 设 计 师 的 想 ; 


。 如 果 一 个 设计 师 乐 于 向 你 提供 反馈 ， 你 相当 于 在 购物 的 同时 获得 了 奖 
励 积分 。 但 是 请 记 住 ， 设 计 师 的 想法 并 不 能 代表 用 户 。 要 与 用 户 保持 
一 致 ， 我 们 必须 不 仅仅 专注 于 网 站 的 外 观 ， 而 这 很 难 做 到 。 


。 为 了 把 事情 复杂 化 ， 现 代 的 网 站 迅速 变 成 了 多 面 结构 体 。 相 互 兖 争 的 
网 站 通常 提供 相似 的 功能 ， 但 是 只 有 提供 了 最 佳 用 户 体验 的 那 一 个 才 
会 胜出 。 这 是 网 站 前 进 的 方向 ， 也 是 网 站 设计 的 一 种 进化 。 

创建 非凡 的 用 户 体验 需要 一 点 点 技巧 、 一 点 点 运气 和 一 系列 细节 性 的 工作 。 

部 些 细节 就 是 你 的 用 户 会 反复 留意 的 东西 。 同 时 ， 他 们 容易 忽略 用 户 体验 领 

域 所 包含 的 很 多 相关 原则 ,比如 视觉 设计 、 信 息 构建 和 可 用 性 分 析 。 在 本 章 ， 

这 些 相关 的 话题 我 们 都 会 小 及， 同时 还 会 提供 例子 和 实用 的 建议 ， 你 可 以 

它们 来 新 建 或 优化 一 个 网 站 。 


41 用 户 如 何 思考 ? 


上 网 的 习惯 与 顾客 选 商店 的 习惯 基本 上 没有 太 大 的 不 同 。 他 们 以 访客 的 
































































































































































































































































































































































































































































































































































































































E 











法 并 不 能 代表 用 户 。 

















































































































































































































































































































































































































41 用 户 如 何 思考 ? 众 妙 之 门 


光 浏 览 S 新 由 B] y 扫 视 某 些 文本 ， 然 后 点 击 第 一 | 让 他 们 感 兴 趣 的 或 是 
大 体 上 与 他 们 正在 寻找 的 东西 类 似 的 链接 。 实 际 上 ， 有 大 量 网 页 他 们 几乎 不 
看 一 眼 。 


大 多 数 用 户 寻找 有 趣 的 ( 或 有 用 的 ) 而 且 可 点 击 的 元 素 。 这 样 的 一 个 元 素 出 
现 ， 用 户 就 会 点 击 。 如 果 打开 的 新 页 面 没 有 达到 他 们 的 预期 ， 他 们 就 会 点 击 
“后 退 ” 按 钮 ， 并 继续 搜索 。 
用 户 重视 质量 和 可 靠 性 :; 如 果 他 们 看 到 高 质量 的 内 容 ， 他 们 通常 愿意 
妨 受 广告 和 糟糕 的 设计 。 这 就 是 为 什么 多 年 来 那些 设计 平庸 而 内 容 优 
良 的 网 站 会 获得 许多 流量 的 原因 。 内 容 本 身 比 用 来 支撑 它们 的 设计 更 
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为 重要 。 
。 用 户 不 会 阅读 ， 而 是 浏览 : 当 他 们 分 析 一 个 网 页 时 ， 他 们 通常 会 寻找 
一 些 能 够 帮助 他 们 略 过 页 面 其 他 内 容 的 固定 点 或 是 销 点 。 





网 站 用 户 是 没有 耐心 的 : 如 果 一 个 网 站 没有 达到 用 户 预 期 ， 那 么 设计 
就 是 失败 的 ， 公 司 也 会 蒙受 损失 。 用 户 处 理 一 个 网 站 信息 所 需 的 认识 
负荷 (cognitive load) 越 高 、 导 航 的 直观 性 越 差 ， 用 户 就 越 容易 离开 ， 
转 而 寻找 其 他 替代 的 网 页 。 


用 户 并 非 总 会 做 出 最 佳 的 选择 : 他 们 并 非 总 是 探寻 如 何以 最 快 的 方式 
查询 想 要 的 信息 。 他 们 也 不 会 以 一 种 直线 方式 ， 一 部 分 接着 另 一 部 分 
地 扫 视 页 面 。 相 反 ,用 户 会 选择 那些 “充满 ”( 既 “ 充 分 ”而 又 令 人 “ 满 
意 ”) 的 信息 。 他 们 会 选择 第 一 个 合理 的 、 表 述 恰 如 其 分 的 选项 。 用 
户 一 且 发 现 一 个 可 能 会 达到 他 们 目标 的 链接 ， 他 们 非常 可 能 会 立即 点 
击 它 。 优 化 是 艰难 的 ， 需 要 很 长 的 时 间 。 使 网 站 变 得 “充满 ”效率 会 
更 高 一 些 。 

。 用户 遵循 他 们 自己 的 直觉 : 在 大 多 数 情况 下 ， 用 户 会 靠 自 己 的 摸索 而 
不 是 靠 阅读 设计 者 提供 的 信息 解决 问题 。 根 据 史 带 夫 ' 克 鲁 克 (Steve 
































1 译 者 注 : 认 知 负荷 理论 (cognitive load theory) 是 Sweller 等 人 在 20 世 纪 80 年 代 提出 的 , 主要 从 认 知 资源 分 配 的 角度 
考察 学 习 和 问题 解决 。 Sweller 等 人 认为 , 问题 解决 和 学 习 过 程 中 的 各 种 认 知 加 工 活动 均 需 消耗 认 知 资源 , 若 所 有 活动 所 
需 的 资源 总 量 超过 个 体 拥有 的 资源 总 量 , 就 会 引起 资源 的 分 配 不 足 , 从 而 影响 个 体 学 习 或 问题 解决 的 效率 。 
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现代 网 站 的 可 用 性 原则 





Krug) 的 观点 ， 一 个 基本 原因 是 用 户 对 此 并 不 在 意 。“ 如 果 我 们 发 现 
一 些 方法 行 得 通 ， 我 们 就 会 坚持 这 么 做 。 对 我 们 来 说 ， 只 要 我 们 能 
使 用 它们 ， 是 否 理解 它们 的 工作 原理 就 无 关 紧 要 。 如 果 你 的 观众 将 按 
你 设计 广告 牌 的 方式 行事 ， 那 么 你 就 设计 出 了 绝 佳 的 广告 牌 。 

。 用户 和 希望 能 够 进行 控制 : 用 户 和 希望 能 够 控制 他 们 的 浏 览 器 ， 并 依赖 那 
些 遍布 网 站 、 展 现 连贯 的 数据 。 比 如 ， 他 们 不 希望 出 乎 意料 地 看 到 弹 
出 的 新 窗 体 ， 他 们 希望 能 够 使 用 “后 退 ” 按 钮 ,返回 他 们 刚才 浏览 过 
的 网 站 。 


4.2 ”使 用 整洁 连贯 的 视觉 设计 


视觉 设计 告诉 一 个 用 户 如 何 同 网 站 进行 交互 。 如 果 界 面 设计 良 J 
会 花费 较 少 的 时 间 去 学 习 如 何 使 用 一 个 网 站 ， 这 样 就 有 更 多 的 时 间 去 实际 
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不 至 的 是 ， 我 们 在 设计 中 经 常 把 自己 的 创意 放 在 重要 的 位 置 ， 以 至 于 界面 设 
计 得 太 过 于 创新 ， 导 致 用 户 在 看 第 一 眼 时 难以 理解 。 具 有 创意 无 可 厚 非 ， 但 
是 当 惯 例 让 位 于 那些 解决 常规 问题 的 新 方法 时 ， 就 不 得 不 重新 学 习 如 人 
更 用 那些 他 们 本 已 熟悉 的 东西 
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当 进 行 一 个 网 站 的 视觉 设计 时 ， 理 解 一 些 通 用 的 惯例 ， 会 有 助 于 创建 一 个 看 
起 来 很 棒 而 又 不 需 耗费 脑力 去 想 如 何 使 用 的 网 站 。 

























































































4.3 固定 元 素 属 于 固定 位 置 


当 阅 读 报纸 时 ， 人 们 已 经 习惯 报纸 的 项 部 是 报纸 的 名 称 ， 名 称 附 ; 
接 下 来 是 标题 。 图 书 在 风格 、 素 材 和 设计 上 可 能 会 有 些 变化 ， 但 其 些 东 
上 是 可 预知 的 ， 比 如 标题 、 作 者 和 措 述 性 摘要 。 
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1 BSE: 超级 畅销 书 《 点 石 成 金 : 访 客 至 上 的 网 页 设计 秘笈 》 和 《妙手 回春 : 网 站 可 用 性 测试 及 优化 指南 》 作 者 。 
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Newspaper Name 


p Wesen, ane 10 2008 





Featured Headline In Prominent Position 














































































































报纸 中 ， 些 人 们 凭 直觉 就 能 理解 的 惯例 ， 比 如 标题 和 日 期 出 现在 顶部 ， 重 
要 的 标题 和 作者 的 姓名 出 现在 报道 的 附近 。 和 报纸 一 样 ， 网 站 也 己 的 惯例 ， 
人 们 不 需要 解释 便 可 理解 。 










































































类 似 地 ， 当 人 们 访问 一 个 网 站 时 也 会 有 某 种 预期 , 这 些 预期 如 果 没有 被 满足 
就 会 比较 困惑 。 因 此 ， 让 用 户 预见 到 网 站 该 如 何 操作 ， 以 及 那些 固定 的 元 素 
会 出 现在 什么 地 方 ， 对 网 站 设计 来 说 是 很 重要 的 。 

网 站 设计 的 一 般 惯例 

链接 到 主页 的 网 站 标题 header ) 通常 会 在 网 站 的 左上 方 显示 。 不 管 
用 户 在 浏览 什么 网 站 ， 如 果 想 返回 主页 ， 这 都 是 他 们 想 要 的 设计 。 


。 宣 传 语 (taglines ) 和 二 级 标题 (secondary headlines ) 通常 紧 靠 在 网 
站 标题 的 下 面 。 宣 传 语 会 迅速 地 传达 出 网 站 的 用 途 。 


。 网 站 的 搜索 框 ( search box ) 通常 会 出 现在 网 站 的 右上 方 或 中 部 的 上 方 。 


。 不 同类 型 的 网 站 也 许 会 有 一 些 共同 的 习惯 。 比 如 ， 当 访问 一 个 提供 
Rss 订阅 的 博客 时 ， 用 户 几 乎 毫 无 疑问 地 会 先 去 页 面 的 右上 方 查看 订 
阅 选项 。 


4.4 搜索 是 简单 的 


搜索 并 不 是 一 直 像 现在 这 样 简单 。 以 前 为 了 得 到 满意 的 结果 ， 用 户 不 得 不 设 
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各 种 各 样 的 搜索 参数 。 亚 马 逊 ( Amazon ) 和 Google ( 谷歌 ) 这 样 的 标 新 
立 异 者 建立 了 一 种 新 的 搜索 标准 : 输入 一 些 内 容 ， 点 击 按钮 ， 然 后 让 网 站 对 
尔 想 要 的 东西 进行 处 理 。 从 此 之 后 ， 搜 索 不 再 是 从 一 个 在 网 站 间 切 换 的 艰难 
过 程 。 更 多 时 候 ， 可 以 通过 一 个 输入 框 和 一 个 搜索 按钮 完成 。 


很 多 时 候 ， 偏 离 这 个 基本 的 设计 也 是 合理 的 ， 但 是 至 少 在 没有 为 用 户 提供 额 
外 信息 的 情况 下 ， 搜 索 功 能 也 应 该 能 发 挥 作用 。 比 如 ， 如 果 通 过 添加 一 个 下 
立 菜单 允许 用 户 限制 检索 条 件 可 以 带 来 好 处 ， 那 就 通过 各 种 方式 添加 一 个 下 
拉 菜 单 ， 但 是 在 没有 使 用 下 拉 菜 单 的 情况 下 ， 搜 索 功 能 也 应 该 可 以 使 用 。 






































































































































































































































































































































































































































































































































































































































人 们 每 天 在 Google 上 数 百 万 次 地 使 用 这 个 搜索 模式 。 确 切 地 说 ， 用 户 不 需要 思 
考 就 知道 该 如 何 操作 这 个 界面 。 































































































这 就 是 搜索 框 的 设计 变 得 很 重要 的 原因 。 搜 索 框 必须 清晰 可 见 、 容 易 辨 识 ， 
同时 使 用 方便 。 有 人 认为 搜索 框 不 需要 设计 ， 毕 竟 ， 它 就 两 个 基本 元 素 : 

输入 框 和 一 个 搜索 按钮 。 蜗 脚 的 设计 会 有 多 大 危害 呢 ? 好 吧 ， 一 些 事 情 会 
出 问题 。 比 如 ， 输 入 框 显示 的 文本 不 易 阅读 ,或 者 输入 框 太 短 或 太 长 。 一些 
设计 者 喜欢 采用 最 简 方案 , 根本 不 提供 “搜索 ”按钮 , 用户 必须 使 用 “ 回 车 ” 
键 。 这 可 不 是 最 好 的 可 用 性 解决 方案 。 
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搜索 框 必须 是 一 个 框 。 你 的 访客 不 会 阅读 页 面 ， 他 们 只 会 浏览 。 针 对 搜索 功 
能 最 常见 的 设计 就 是 一 个 框 ， 一 个 包含 输入 框 而 显得 相对 宽大 的 框 。 用 户 倾 
名 于 在 网 页 中 通过 浏览 寻找 这 个 图 样 ， 这 种 观念 已 经 根深 蒂 固 ， 所 以 应 尽量 
避免 使 用 其 他 的 设计 ， 比 如 带 链 接 的 文字 或 不 融 输 入 框 的 按钮 。 


司 样 ， 搜 索 框 也 要 简单 。 根 据 对 可 用 性 的 研究 ， 在 默 
3E 














































































































































































































































































































Y zm NAS § mS 














































































































索 选项 会 显得 更 加 友好 一 些 。 对 于 高 级 搜索 ， 一 些 普 通用 户 在 使 用 它 的 时 候 
会 感到 困惑 。 一 项 研究 表明 ， 大 多 数 用 户 不 知道 该 如 何 使 用 高 级 搜索 或 布尔 


























搜索 的 语法 。 


很 多 地 方 可 以 放置 搜索 框 ， 但 是 只 有 几 个 是 正确 的 。 对 用 户 来 说 ， 最 常见 















































































































































1 Search: Visibale and Simple http://www.useit.com/alterbox/20010513.html. 
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的 地 方 就 是 网 站 中 每 个 页 面 的 
























































部 上 方 或 右上 方 。 当 用 户 通过 F 形 浏览 网 站 
， 一 些 博客 倾向 于 把 搜索 框 放 在 ( 左 侧 或 右 


































































































的 时 候 ， 很 容易 发 现 它们 。 然 
侧 ) 工具 栏 的 smo 这 也 许 不 à 
































个 好 主意 ， 但 很 可 能 是 出 于 广告 的 考虑 。 




















4.5 “链接 要 像 链接 



















































































永远 不 要 让 用 户 去 猜测 一 个 元 素 是 否 可 以 点 击 。 一 般 来 说 ， 使 用 颜色 和 下 划 





线 的 文本 是 一 个 链接 。 颜 色 和 下 
链接 最 优 的 形式 。 





























划 线 要 一 起 使 用 ， 这 个 组 合 是 辨识 文本 中 超 











在 创建 链接 时 值得 记 住 的 一 些 事情 


可 点 击 的 元 素 应 该 突出 。 颜 色 并 不 总 是 能 表示 链接 ， 因 为 一 个 网 站 通 


常 有 一 些 并 不 是 链接 的 有 色 元 素 。 这 就 是 为 什么 颜色 和 下 划 线 的 组 合 
是 一 种 稳妥 的 表示 链接 的 标志 。 


不 使 用 颜色 和 下 划 线 的 组 合 使 非 链接 元 素 显 得 像 个 可 以 点 击 的 按钮 。 


这 将 使 用 户 对 于 什么 可 以 点 击 感到 困惑 。 





在 固定 的 区 域内 和 页 面 间 尽量 使 用 相同 风格 的 显示 链接 。 不 要 使 用 不 


同 的 颜色 表示 链接 ， 也 不 要 对 一 些 链接 加 下 划 线 ， 而 另 一 些 不 加 。 


链接 应 该 有 不 同 的 状态 。 当 为 链接 设 定 样式 时 ,注意 鼠标 悬 停 ( hover ), 


被 激活 (active ) 和 被 访问 过 ( visited ) 这 三 个 状态 。 这 样 ,用 户 操 作 时 ， 


便 会 很 明了 。 


4.6 仅 在 必要 的 时 候 使 用 下 拉 菜 单 









































并 不 是 没有 用 处 ， 他 们 在 网 上 绝对 有 自己 的 一 席 之 地 ， 但 它们 也 经 
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rA 












































常会 被 误 用 。 一 般 来 说 ,下 拉 菜单 



































3 来 让 用 户 从 备 选 属性 列表 中 选 出 一 个 属性 。 











































































































Urt. SEE UG Ru 














因为 下 拉 菜 单 通常 占用 很 少 的 空 

















间 ， 对 一 些 设计 者 而 言 ， 它 们 成 了 最 佳 的 导 

















的 时 候 ， 下 拉 菜 单 的 缺点 也 暴露 出 来 。 


。 下 拉 菜 单 中 的 链接 可 见 性 较 低 ， 用 户 将 只 能 看 到 一 个 选项 ， 除 非 菜 单 


被 全 部 展开 。 
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当下 拉 荣 单 包 含 太 多 选项 时 ， 用 户 不 得 不 通过 滚动 来 查看 选项 。 在 这 
种 情况 下 ， 传 统 的 列表 会 更 好 一 些 。 


。 用 户 在 赁 直觉 浏览 时 ， 下 拉 菜 单 不 是 最 先 被 察觉 到 的 东西 。 在 选用 它 
们 之 前 与 普通 的 导航 菜单 进行 测试 和 比较 ， 看 它们 的 效率 如 何 ， 不 失 
为 明智 之 举 。 

然而 ， 下 拉 菜 单 并 不 一 定 要 很 小 。 根 据 Jacob Nielsen 对 下 拉 菜 单 的 研究 ， 所 

谓 的 “巨型 ”导航 下 拉 菜 单 效 果 也 不 错 。 很 显然 ， 大 的 二 维 下 拉面 板 通过 

对 导航 选项 进行 分 组 ， 把 用 户 从 不 得 不 进行 的 滚动 中 解脱 了 出 来 ， 通 过 有 效 

地 使 用 版 式 、 图 标 和 工具 提示 ， 它 可 以 精确 地 呈现 用 户 选 项 。 
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下 拉 莱 单 能 将 内 容 组 织 成 整洁 的 小 元 素 ， 如 果 没 有 做 好 ， 它 将 和 糟糕 的 布局 
一 样 。 当 多 于 两 个 级 别 时 应 避免 采用 下 拉 菜 单 。 如 果子 菜单 通过 晤 停 
ZEE FH 的 鼠标 指针 E 它们 ， 就 会 失去 焦点 wo 如 果子 菜单 通过 点 击 
将 需要 太 多 的 点 击 操作 ， 使 菜单 难于 使 用 。 


TÉ dd ( Brita.de ) 犯 了 这 样 的 错误 。 菜 单 太 难 使 用 ， 因 为 即使 鼠标 指 
针 轻 微 失 ARAS T, (RE 从 $ 始 。 注意 item, 它 挡 人 Jost 航 信 Fio 实际 上 ， 
为 了 使 子 菜单 可 见 而 且 可 读 ， 将 下 拉 导 航 中 的 工具 提示 全 部 移 除 是 个 好 主意 。 
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Any way you wanttoplay 0 4 4 4 total games 


EZ m - NEWS FORUMS 


Q Search EA com 















* Play Free Games 


Platform 
Explore) . B G 
- * PI me: * Racing Games 
* Re er 
* wii - RPG Games 
Browse Video G | 
* Xbox 360® * Shooting Games | 











o By Brand * PLAYSTATION®3 * Puzzle Games 
q * PlayStation®2 $ * Strategy Games 

o mee a * Online Games * Kids Games 

o By Platform * Nintendo DS™ * Music Games 
1 Brutal Legend - iPhone/iPod Gam: “8 Gam 


























个 漂亮 、 整洁、 合理 组 织 的 巨型 下 拉 菜 单 ,来自 EA.com。 注 意 紧 挨 着 “Games” 
和 “Media” 列 表 项 目的 可 视 箭头 (visual indicators )， 它 们 清楚 地 告诉 用 户 在 下 
拉 菜 单 中 将 提供 进一步 的 导航 选项 。 




















































































































1 http://www.useit.com/alterbox/mega-dropdown-menus.html, 
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© BRITA Deutschland 








Unternehmen aquazine Kontakt 


Startseite » 


Filte á T - Kaffeemaschinen E č] Ee 


Vending-Automaten 


d| Produkte für —- -Automaten | BRITA —— 


SPuimescmnen 
Watercooler 


Zeige: [4 


BRITA bietet 
Wasserfilter für 
folgende Anwendungen 
an: 


© Kaffeemaschinen 

© Vending-Automaten 

© Kombidampfer & 
Backofen 

© Spülmaschinen 

© watercooler 


NE 
Brita.de 的 下 拉 菜 单 很 难 使 用 ， 它 包含 了 多 个 层级 的 导航 ， 必 须 进行 水 平 滚 动 ， 
同时 工具 提示 挡住 了 导航 选项 。 界 面 不 够 友好 。 
免 使 用 多 个 下 拉 级 别 ， 这 对 于 你 正 试图 创建 的 导航 类 型 来 说 ， 也 许 是 个 太 
严格 的 限制 。 然 而 ， 有 一 个 解决 方案 也 许可 以 增进 悬 停 功 能 和 多 级 导航 的 
可 用 性 。 户 把 鼠标 指针 移 开 菜单 ,下拉 列表 连同 大 部 分 菜单 会 立刻 消失 。 
这 个 解决 方案 是 延缓 它们 的 消失 过 程 。 或 者 增加 一 个 单 击 功能 ， 要 求 用 户 点 
击 下 拉 菜 单 外 部 的 区 域 来 关闭 它 ， 这 和 户 站 层 ( Lightbox ) 的 工作 方式 类 似 。 







































































































































































































































































































































































































































































































































































t£ 下 保时捷 (Porsche ) 网 站 的 菜单 。 它 有 多 个 层级 ， 但 是 它 的 菜单 
个 广阔 的 焦点 区 (focus range )， 所 以 你 必须 把 鼠标 移 定 的 距离 才 
能 关闭 它 。 这 是 一 个 很 好 的 设计 方案 。 
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911 Carrera 4 
Safely and dynamics. Coupled to inner strength. 











911 Targa 4 





MSRP $82,500.00 










911 Targa 45 
911 Turbo 
911 Turbo Cabriolet. 







^| senem 
MGT 





































































































现代 网 站 的 可 用 性 原则 





4.7 ”使 注册 表单 尽量 简洁 










































































































































































Password 

设计 高 效 的 网 页 表单 并 不 容易 ， 很 估 eee 
* 没 人 喜欢 填 表 单 ， 无 论 E F £X z 57% 

还 是 在 线 下 。 除 非 你 的 产品 或 服务 具 

革命 性 的 理念 ， 使 用 户 看 第 一 眼 就 
n = 5 DAT M SES L (Letters and numbers only please. 
被 于 5], A Li f 何 7 注册 表 J No spaces.) 
砌 到 你 的 网 站 上 都 是 无 济 于 事 的 。 做 Password 





































































































出 合理 的 设计 决策 ， 使 用 户 完成 表单 

变 得 轻松 、 容 易 、 和 舒服 是 很 重要 的 。 13% 

根据 我 们 "注册 表单 设计 调查 ”( Sign-up 

Form Design Survey ) 的 结果 ， 注 册 链 

接 最 常用 的 标 ) 
并 且 会 放置 在 页 面 的 右上 角 。 注 册 表 
单 通 常 有 一 个 简单 的 布局 ， 以 防 分 散 






































Password 











z 














日 | 


题 = “注册 ” Sign up ); 






























































































































































































































































户 的 注意 力 。 它 们 通常 会 个 页 

面 ， 并 通过 解释 注册 将 会 带 来 什么 好 eem 

处 来 吸引 用 户 注册 。 2696. 

输入 框 通过 粗 体 突出 ( 62% )， 输 入 标 ， 提 示 通 常 出 现在 输入 框 下 面 ( 57% ), 



















































































签 ( 当 它们 放 在 输入 框 左 侧 时 ) 通常 ”或 者 放 在 右边 ( 26% )。 
右 






























































à SENE ia 46 E ms [————À 
对 齐 。 表单 的 设计 Be RO] SEU tomer eset [ET — 3 onera EE —Z] 
E S " gar temm ELI ementi E07 
简 单 . 设计 Jm 项 向 ] 使 J 少 om iil 1 One more label ene: One more label Suus 
L primary action | [ Primary action | 


























的 输入 框 ( 3~5 个 ) 和 少量 可 选择 的 输 
入 框 (2 个 或 更 少 )。 垂直 排列 文本 框 ERR 
E 比 水 排列 好 些 。 Wk 种 标 [Beewe 0 0x eli [Seca vane — £l 


签 排 列 方式 ( 比如 放 在 右 侧 、 左 侧 或 Oh gw Spese a 








































































































注册 表单 通常 不 包含 分 散 注 意 力 的 i 
ama DEORE RAIA 输入 框 的 标题 用 粗 体 突出 
， 这 样 有 助 于 使 用 户 专心 完成 注册 。 入 标签 通常 右 对 齐 


rb Jro 














(6296), #4 






















































































1 http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/. 
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能 地 避免 使 用 Splash 页 面 众 妙 之 门 












































它们 通常 不 包含 悬 停 激 活 和 焦点 等 状态 。 提示 通常 放 在 输入 框 的 下 边 ( 57% ) 



















































































































































































昌 子 邮件 地 址 通常 不 需要 确认 ( 82% )， 但 是 密码 通常 需要 确认 ( 72% )。 若 
使 用 表格 形式 , “取消 ”按钮 几乎 没有 用 , “提交 ”按钮 左 对 齐 (5696) 或 
E 26% )， 然 而 Captchas f Ri 7 RAE, 最 后 ， 感 谢 信 息 通 党 
来 激发 用 户 进一步 对 网 站 的 服务 进行 探索 。 


4.8 考虑 添加 “返回 页 首 ” 链 接 


不 幸 的 是 ,让 用 户 返 回 到 页 面 的 顶部 一 一 这 个 友好 的 服务 , 很 少 有 网 站 提供 。 
很 多 设计 师 的 作品 中 都 没有 包含 它 ， 这 是 因为 “返回 页 首 ” 链 接 很 少 被 使 用 。 
比如 ， 对 于 那些 页 面 或 文章 短小 的 网 站 ， 它 显得 毫 无 必要 。 对 于 内 容 可 以 显示 
在 屏幕 之 内 页 面 ， 点 击 这 样 的 链接 ， 页 面 不 会 有 任何 变化 ， 这 有 了 时候 会 招 人 大 
烦 。 显 示 器 分 辨 率 的 多 样 化 使 “返回 页 首 ”链接 有 时 变 得 没有 用 或 没有 必要 。 
然而 ， 对 于 那些 页 面 很 长 的 网 站 ， 提 供 这 个 极 好 的 功能 既 可 以 节省 时 间 ， 又 
可 以 省 去 鼠标 的 垂直 滚动 操作 。 
“返回 页 首 ” 链 接 的 主要 问题 是 它 影响 浏览 器 的 导航 功能 并 且 会 “污染 ” 浏 
览 器 的 历史 记录 。 因 为 像 其 他 链接 一 样 ， 这 个 链接 使 用 了 锚 ， 点 击 浏览 器 的 
“返回 ”按钮 ， 它 会 把 用 户 带 回 到 本 页 面 的 底部 ， 而 不 是 前 一 个 页 面 。 另 外 ， 
可 用 性 专家 声称 , “返回 页 首 ” 链 接 在 概念 上 是 模糊 的 ， 在 网 站 之 间 很 难 连 
贯 地 完成 它 的 功能 ， 同 时 会 影响 到 基于 话语 的 用 户 代 理 的 使 用 。 


“返回 页 首 ” 链 接 会 在 FAQ、 帮 助 和 站 点 地 图 中 使 用 ， 它 有 助 于 分 割 章节 和 
段落 ， 并 为 用 户 提供 一 个 快速 跳 回 到 开始 页 的 方式 ， 而 主导 航 就 在 开始 页 。 
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4.9 尽 可 能 地 避免 使 用 Splash 页 面 


Splash 页 面 是 网 站 的 首页 的 一 种 ， 它 除了 让 用 户 获得 一 些 网 站 的 信息 
知识 之 外 ， 不 提供 任何 实质 的 内 容 。 设 计 师 在 他 们 的 作品 展示 网 站 中 使 
Splash 页 面 是 为 了 通过 赏心悦目 的 效果 吸引 用 户 的 注意 力 。 使 用 它 介 
了 把 用 户 的 注意 力 吸 引 到 公司 最 新 的 产品 上 去 。 但 是 它们 却 增 
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现代 网 站 的 可 用 性 原则 








载 时 间 ， 除 了 “进入 网 站 





之 外 ， 几 乎 没有 任何 导航 选项 


着 设计 师 的 创造 力 ，Splash 页 面 可 以 提供 很 多 吸引 人 的 视觉 元 素 。 
些 使 了 可 以 自动 播放 的 交互 式 flash 动画 ( 对 于 打开 了 多 个 此 类 网 站 的 
而 言 ， 这 简直 是 灾难 )。 


它们 通常 使 用 非常 简单 的 结构 ， 大 多 数 只 有 一 张 图 片 、 几 行文 字 和 链接 。 
Splash 页 面 和 网 站 的 设计 风格 不 会 总 是 保持 一 致 。 
虽然 大 多 数 网 站 不 使 用 它们 ，Splash 页 面 仍然 很 流行 ， 因 为 有 时 它们 是 必需 
的 ， 比 如 展示 免责 声明 、 重 要 信息 ( 活动 截止 日 期 、 重 要 升级 等 )、 浏 览 网 
站 的 软件 要 求 (Flash. Java, QuickTime 等 ) 或 浏览 提示 ( 通常 用 于 Flash 网 
站 )。Splash 页 面 也 可 以 用 来 让 用 户 选择 他 们 喜欢 的 浏览 模式 ( 标准 或 者 
屏 ) 网 速 ( 高 或 低 带 宽 ) 以 及 语言 ( 虽然 语言 选择 可 以 也 应 该 在 主 布 局 中 
整合 )。 底 线 是 :用 户 不 喜欢 Splash DA, "创造 性 ”的 Splash PIE Z2 A lo 































































































































































































































































































































































































































































































































































































































































































Bile Edit View History Favorites Tools Help & 
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[@ TalerdeldessAtuiplén FI 








Done. je 


个 典型 的 Splash 页 面 ， 包 含 一 条 欢迎 信息 和 语言 选择 链接 。 


4.10 ”链接 应 该 在 同一 窗口 打开 


最 初 ， 是 否 要 在 新 的 窗口 打开 链接 似乎 取决 于 个 人 网 站 和 用 户 的 嘉 好。 访问 
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4.10 链接 应 该 在 同一 窗口 打开 众 妙 之 门 







































































































































































































































































































































































































































































































































































































































































p 些 包含 很 多 外 部 链接 的 网 站 时 ， 用 户 更 希望 能 够 自动 在 新 的 窗口 打开 这 些 
链接 而 不 是 必须 手动 完成 这 一 过 程 。 访 问 那些 包含 少量 外 部 链接 的 网 站 时 ， 
希望 能 够 选择 哪些 链接 要 在 新 的 窗 打开 ， 以 便 稍 后 浏览 。 然而 ， 

事情 并 不 总 是 这 样 。 

从 可 用 性 的 角度 考虑 ， 强 制 在 新 的 窗口 中 打开 链接 破坏 了 U 设计 的 一 条 基 
本 原则 : 用 户 应 该 始终 能 对 界面 进行 控制 。 户 需要 界面 具有 连贯 性 ， 用 户 
需要 知道 他 们 的 交互 活动 不 会 被 打 断 。 任 何 偏离 了 这 条 原则 的 做 法 都 会 使 网 
站 变 得 更 加 设计 导向 ( design-oriented ) 而 不 是 用 户 导向 (user-oriented )。 
正如 Shneiderman 所 说 的 那样 ， 有 经 验 的 用 户 有 强烈 的 欲望 希望 知道 他 们 1 
在 控制 系统 ， 以 及 系统 将 会 对 他 们 的 动作 做 出 反应 。 
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First saved by: Sheado blackberry — development — mobla 
户 应 该 能 够 选择 是 在 当前 标签 页 、 新 标签 页 ， 还 是 在 新 窗口 打开 链接 。 
虽 制 在 新 窗口 打开 链接 的 主要 问题 是 ， 这 个 决定 淹没 了 用 户 自己 控制 浏览 器 
行为 的 决定 。 考 虑 一 下 用 户 不 知道 该 在 新 的 窗口 还 是 在 同一 窗口 打开 链接 的 
两 种 情况 。 
1. 用 户 希 望 在 新 的 窗口 打开 和 链接， 但 是 网 站 却 在 同一 窗口 打开 链接 。 
希望 在 同一 窗口 打开 链接 ， 网 站 却 在 新 的 窗 链接 。 
第 一 种 情况 , 用 户 可 以 通过 上 下 文 菜单 或 快捷 方式 选择 在 新 的 窗口 打开 链接 。 
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现代 网 站 的 可 用 性 原则 






















































































在 这 里 ， 电动 作 的 发 出 者 ， 因 为 他 或 她 决定 如 何 展示 链接 所 指 的 页 面 。 
网 站 的 行为 满足 用 户 的 预期 ， 用 户 获 得 了 良好 的 体验 。 
















































































第 二 种 情况 ， 用 户 点 击 链接 ， 仪 仅 发 现 网 站 跳 转 到 了 新 的 页 面 。 在 这 种 情况 
下 ， 用 户 仅仅 是 动作 的 接受 者 ， 无 法 控制 打开 新 页 面 的 行为 ( 最 多 只 能 当场 
关闭 它 )。 网 站 的 行为 不 符合 用 户 的 预期 ， 用 户 获得 的 不 是 很 完美 的 体验 。 
































































































































































































































当 一 个 网 站 的 行为 不 可 预期 时 ， 用 户 会 被 惹恼 。 如 果 在 新 的 窗口 打开 链接 会 
这 来 更 多 的 便利 ， 那 么 就 让 用 户 自己 去 完成 这 一 动作 。 不 要 通过 替 用 户 来 做 
决定 的 方式 来 侮辱 用 户 的 智力 。 不 要 强迫 用 户 打开 新 的 窗口 ， 除 非 你 有 非常 


充分 的 理由 。 


4.11 ”你 需要 注意 以 下 可 用 性 检查 点 


1. 不 要 改变 用 户 窗口 的 大 小 ， 这 个 观点 和 反对 弹出 窗口 ( pop-up ) 的 观点 
是 类 似 的 。 一 些 浏览 器 ， 比 如 IE， 会 为 以 后 的 进程 保存 浏览 器 的 尺寸 。 
正如 Ben Bodien 所 说 的 那样 “认为 自己 比 用 户 更 清楚 软件 环境 该 如 何 配 
:非常 不 合 情 理 的 ”。 
2. 不 要 使 字体 太 小 : 字体 如 果 太 小 ， 长 篇 的 文章 阅读 起 来 会 比较 困难 。 也 
不 要 把 链接 、 表 单 、 搜 索 框 和 其 他 的 元 素 弄 得 太 小 。 另 外 ， 和 确保 任何 内 
容 块 都 在 50~85 个 字符 之 间 ， 在 文字 的 周围 提供 充足 的 空白 。 
3. 链接 文本 要 清晰 : 链接 文字 应 该 用 来 描述 它 所 指向 的 目的 地 。 避 免 使 























































































































































































































































































































































































































































































































































































































































































































































































































含糊 的 描述 。 
4. 去 除 死 链 ， 网 上 有 大 多 死 链 了。 不 要 把 你 的 用 户 引 入 死路 。 
5. 校对 : 通读 全 部 内 容 。 即使 你 已 经 读 过 了 5 FS Eo 另外 ， 也 请 别人 















































来 读 一 读 。 你 总 会 找到 一 些 可 以 改进 的 地 方 。 看 看 你 是 否 可 以 在 保持 特 
性 不 变 的 情况 下 压缩 文本 。 把 大 的 文本 块 分 成 小 的 段落 。 添 加 醒目 的 标题 ， 
种 用 列表 以 便 用 户 扫 读 。 校 对 时 也 不 要 忘记 动态 文本 ， 比 如 弹出 窗口 的 
文字 。 通 过 检查 ， 确 保重 要 的 文字 在 显示 时 不 会 成 为 孤立 的 一 行 ， 确 保 
标点 符号 使 用 正确 ， 尤 其 是 撒 号 、 引 号 、 连 字符 和 破 折 号 。 

6. 检查 功能 : 仔细 检查 每 一 处 。 如 果 你 有 一 个 建立 联系 的 表单 ， 测 试 一 下 
它 的 结果 。 让 其 他 人 去 检测 你 的 网 站 ， 不 仅仅 限于 家 庭 成 员 和 朋友 ， 还 
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你 需要 注意 以 下 可 用 性 检查 点 众 妙 之 门 


















































立 包 括 目 标 用 户 。 坐 下 来 看 看 他 们 如 何 使 用 你 的 网 站 的 ， 当 其 他 人 使 用 
网 站 的 方式 和 你 的 预期 不 同时 会 发 现 什 么 ， 这 是 个 很 有 吸引 力 的 问题 。 
通常 要 检查 的 东西 是 建立 联系 的 表单 、 搜 索 功 能 、 购 物 框 和 注册 区 域 。 
7. 使 表单 尽 可 能 简洁 :使 用 合适 的 表单 元 素 ( 选择 按钮 、 复 选 框 、 输 入 区 域 、 
文本 区 域 ) 来 完成 相应 的 任务 ， 提 供 充足 的 空白 ( 以 及 足够 的 边 距 ) 以 
更 输入 内 容 ， 移 除 不 必要 的 区 域 ， 为 每 个 输入 区 域 提供 描述 性 的 标签 ( 如 
果 有 必要 添加 帮助 信息 和 提示 信息 )。 同 样 ， 不 要 强迫 用 户 使 用 严格 的 输 
入 格式 ( 比如 ， 当 用 户 输 入 的 电话 号 码 没 有 括号 、 连 字符 和 空格 时 ， 系 
统 也 应 该 能 够 识别 )。 同样 ， 提 供 有 用 的 、 信 息 充 分 的 错误 提示 信息 。 
8. 优雅 降级 。 你 的 网 站 在 JavaScript 不 起 作用 时 也 要 能 正常 工作 。 因 为 出 于 

对 安全 因素 的 考虑 ， 用 户 通常 会 关闭 浏览 器 对 JavaScript HHA 
以 对 此 要 有 所 淮 通过 测试 ， 确 保 你 的 表达 在 这 种 情况 下 仍然 能 : 
服务 器 端 的 有 效 性 检验 ， 同时 对 你 使 用 也 进行 测试 


9. 不 要 忘记 保护 性 设计 : 最 容易 被 忽略 的 保护 性 设计 元 素 就 是 404 了 
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T Hlo 
当 用 户 请 求 一 个 不 存在 的 页 面 时 ， 就 会 显示 404 页 面 。 通 过 提供 一 个 有 
3 的 404 页 面 把 你 的 用 户 引导 回来 ， 这 个 页 面 可 以 导向 主页 ， 也 可 以 向 

也 用 户 推 荐 他 们 可 能 感 兴趣 的 页 面 。 同 样 检查 你 需要 验证 的 表单 。 通 
二 提交 异常 信息 进行 测试 ( 在 需要 填 数 字 的 区 域 填写 大 量 字符 和 字母 等 
RA) 是 否 会 发 生 错 误 ， 以 及 是 否 为 用 户 提供 了 足够 的 反馈 信息 
义 便 修 正 它 。 



























































10. 考虑 打印 网 页 : 如果 用 户 想 要 打印 网 站 上 的 网 页 ， 他 们 只 希望 打印 
要 内 容 而 不 是 导航 和 额外 的 设计 元 素 。 这 就 是 为 什么 要 创建 一 个 专门 
来 打印 的 模板 。 同 时 ， 某 些 CSS mR, HOMBRE (floated text 
block )， 打 印 出 来 的 效果 并 不 总 是 很 好 。 
11. 为 获得 最 佳 性 能 而 努力 ; 你 将 会 为 了 获得 最 佳 性 能 而 配置 你 的 网 站 。 在 
中 站 发 布 后 应 该 持续 进行 这 乍 ， 但 是 你 也 可 以 在 发 布 前 通过 简单 的 
几 个 步骤 进行 操作 。 减 少 HTTP 请 求 、 尽 可 能 使 用 CSS sprite、 优 化 网 站 
&| HM. FHkffilavaScript 和 CSS 文件 ， 这 样 你 的 页 面 会 载 入 得 更 快 ， 
少 的 服务 器 资源 。 
12. 要 让 用 户 很 容易 联系 到 你 : 也 许 你 不 想 与 用 户 联系 ， 但 是 如 果 你 的 用 户 
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现代 网 站 的 可 用 性 原则 



































想 要 和 你 联系 ， 但 是 却 找 不 到 任何 联系 信息 ， 他 们 将 失去 兴趣 和 对 你 的 
信任 。 这 对 于 网 站 而 言 是 个 灾难 ， 它 会 使 网 站 错失 良机 。 


4.12 ”传达 你 的 网 站 的 组 织 结 构 


在 《用 户 体 验 元 素 》 一 书 中 ，Jesse James Garret 提出 了 网 站 骨架 的 概念 。 简 
单 地 说 ， 网 站 骨架 有 助 于 决定 哪些 表单 对 网 站 的 功能 而 言 是 必要 的 。 以 下 是 
这 一 理论 的 一 些 背 景 。Garret 假定 网 站 用 户 体验 领域 可 以 通过 两 个 不 同 的 


度 进行 探索 :一 个 是 软件 界面 ( 比如 在 网 站 应 用 中 ), 另 一 个 是 超 文本 系统 ( 
将 是 内 容 管 理 系统 的 内 容 部 分 )。 
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然 一 个 网 站 很 少 能 完全 通过 它 的 内 容 进行 描绘 ， 但 也 很 少 能 完全 通过 它 的 
能 进行 描绘 。 不 管 情况 如 何 ， 我 们 都 总 是 必须 传递 它 的 组 织 结构 。 



















































































Girlgamercom 使 用 了 主题 颜色 来 对 网 站 不 同 部 分 进行 区 分 。 不 同 之 处 虽然 相对 
细微 ， 但 是 却 能 让 各 部 分 很 好 地 展示 自己 。 
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414 建立 良好 的 导航 众 妙 之 门 





























设计 清晰 易 用 的 界面 属于 界面 设计 的 领域 。 如 果 一 个 网 站 主要 是 由 内 容 驱 动 
的 ， 我 们 就 不 得 不 帮助 用 户 获 得 这 些 内 容 ， 这 被 称 为 导航 设计 。 在 以 上 两 个 
实例 中 ,我 们 都 需要 帮助 用 户 弄 清楚 我 们 网 站 上 的 哪些 信息 对 他 们 是 可 用 的 ， 
这 就 需要 用 到 信息 设计 。 再 重申 一 下 : 界面 设计 帮助 用 户 做 事情 ， 导 航 设计 
帮助 用 户 找到 想 要 的 东西 ， 信 息 设计 帮助 网 站 与 用 户 进 行 交 流 。 在 为 一 个 网 
站 进行 视觉 设计 时 ， 这 些 都 需要 考虑 。 


413 ”使 用 标记 来 构建 上 下 文 


部 分 使 用 不 同 的 颜色 、 页 眉 和 按钮 , 可 以 帮助 用 户 定位 ,这些 被 称 为 标记 。 
站 标记 的 作用 很 像 购 物 中 心 和 游乐 园 中 信息 牌 上 的 “我 在 这 儿 ”标签 。 这 
就 是 为 什么 在 新 的 窗口 打开 链接 降低 了 体验 : 用 户 访问 内 容 的 连贯 性 ; 
到 了 破坏 。 用 户 了 解 自己 在 网 站 中 的 位 置 会 有 助 于 他 们 建立 一 种 目的 感 ，# 
使 他 们 问 自己 “我 能 在 这 做 什么 ”“。 这 就 是 信息 设计 的 目的 : 使 用 户 能 够 
对 他 们 可 及 的 信息 进行 选择 。 


考虑 一 下 像 日 间 看 护 这 样 的 行业 ， 它 的 网 站 必须 能 够 吸引 不 同 的 用 户 。 网 站 
的 一 部 分 可 以 使 用 非 标准 的 版 式 、 离 奇 的 文字 说 明 、 卡 通 文字 和 明亮 的 颜色 
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来 吸引 孩子 ， 然 而 另 一 部 分 应 该 使 用 优雅 的 字体 、 直 接 的 说 明 、 抽 象 的 图 案 
和 柔和 的 配色 方案 来 吸引 成 年 人 。 通 过 这 种 方式 ， 网 站 吸引 了 广泛 的 用 户 ， 
并 通过 标志 把 不 同 的 信息 定位 到 不 同 的 部 分 。 




















4.14 建立 良好 的 导航 


除了 内 容 外 ， 导 航 可 能 是 网 站 最 重要 的 部 分 。 幸 运 的 是 ， 我 们 能 够 利用 一 些 
惯例 来 把 设计 决策 和 导航 连接 起 来 。 在 多 数 情况 下 ， 用 户 仅 仅 试图 得 到 “我 
能 去 哪儿 ? ”这 个 问题 的 答案 。 但 是 这 个 答案 并 不 总 是 像 他 们 希望 的 那样 简 
单 。 总 体 来 说 ， 用 户 在 使 用 内 容 为 主 的 网 站 时 ， 希 望 任何 页 面 都 能 提供 3 


类 型 的 导航 。 


4141 全 局 导航 ( Global Navigation ): 在 整个 网 站 中 我 都 能 去 哪儿 ? 


全 局 导航 通常 以 表格 式 导航 的 形式 出 现 ， 还 会 包含 一 个 便捷 的 指向 网 站 主页 
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现代 网 站 的 可 用 性 原则 























的 链接 。 全 局 导航 应 该 包含 “ 受 控制 的 ”文字 和 短语 ( 比如 各 栏目 的 名 称 、 
行业 标准 术语 和 外 行使 用 的 语言 )， 并 且 突 出 网 站 的 结构 。 因 为 全 局 导航 如 
果 放 置 得 体 的 话 ， 将 会 成 为 用 户 最 先 去 的 地 方 ， 它 的 设计 至 关 重 要 。 

4.14.2 ”本 地 导航 ( Local Navigation ): 在 这 个 部 分 我 能 去 哪 ? 


许多 用 户 喜 欢 进一步 浏览 和 他 们 正在 


























































































































































































































Global Navigation 



























































































































































































































































































































































浏览 的 内 容 相关 的 内 容 ， 本 地 导航 正 [的 二 和 RM d 
好 能 满足 这 一 需求 。 如 果 网 站 组 织 得 
很 好 ， 当 用 户 访问 某 一 栏目 时 会 知道 EI 

也 们 将 会 发 现 什 么 ， 本 地 导航 就 是 他 1 = Contextual Navigation 
门 获得 此 类 内 容 的 入 口 。 T Moves you in the current page 
AAA SMA AEM BH 8B 
个 共同 的 原因 ， 很 多 网 站 现在 采用 了 jd BACK TO TOP 

种 混合 导航 的 方式 。 例 如 ,在 Ama- ——— l 
zon 完成 了 一 次 搜索 后 ， 用 户 可 以 通过 使 用 本 地 导航 ， 按 类 别 进行 浏览 ， 及 
时 并 且 恰 如 其 分 地 满足 了 的 需求 。 





















































4.14.3 上下文 导航 (Contextual Navigation ): 在 这 个 页 面 我 能 
去 哪儿 ? 

3 户 已 经 深入 到 你 的 网 站 ， 并 发 现 了 他 们 正在 寻找 的 内 容 ， 他 们 接 下 来 该 
AMT? 上 下 文 导航 会 把 用 户 留 在 同一 页 面 ， 但 是 允许 他 们 通过 容易 理解 的 
内 容 区 域 四 处 活动 。 


上 下 文 导 航 是 一 种 未 被 充分 使 用 、 但 十 分 具有 价值 的 导航 形式 。 













































































































































































































































































































































































































































































































































































当 创建 上 下 文 导 航 时 ， 把 菜单 放 在 内 容 的 顶部 ( 通常 是 一 个 目录 表 或 文章 分 
类 列表 )， 同 时 在 页 面 的 各 部 分 都 包含 “返回 页 首 ” 链 接 。 如 果 执 行 正确 ， 
上 上下文 导 航 会 把 你 的 网 站 上 的 页 面 变 成 资源 ， 鼓 励 用 户 经 常 回来 寻找 信息 。 
想 一 想 维 基 百 科 每 个 页 面 是 多 么 有 用 。 更 重要 的 是 ， 上 下 文 导航 提供 了 一 个 
独特 的 ( 但 经 常 被 忽略 ) 机 会 ， 它 可 以 在 构建 网 站 品牌 的 同时 ， 进 行 交叉 销 




















































































































售 、 促 销 和 使 用 户 获 得 资讯 。 
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众 妙 之 门 
























































在 浏览 你 网 站 的 一 个 页 面 后 ， 许 多 用 户 离 开 了 ， 访 问 了 其 他 网 站 或 关闭 了 浏 


W, o 这 时 ， 一 个 好 的 7S KE F AS 的 下 面 紧 跟 上 补充 导航 o 补充 st AT E 
包含 相关 内 容 ， 以 便 用 户 能 够 停留 并 获悉 你 的 网 站 还 能 提供 什么 。 












































































































































































































































































































































































































































TEE ( “面包 属 路径”) 是 一 种 典型 的 二 级 导航 模式 ， 它 用 来 定位 用 户 在 一 个 
网 站 或 一 个 网 络 应 用 中 的 位 置 。 这 个 词 来 自 于 Hansel 和 Gretel E 童话 
两 个 小 孩 通 过 扔 面包 履 形 成 的 路 径 回 到 了 LANCE SER EE EH 况 类 似 ， 
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NV. FA 为 用 户 提供 了 种 返 
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到 他 们 出 发 点 的 途径 。 








Al LSE RSA My 



































Now What? 


You've reached the end of this post. Seeing you made it this far means you might be interested in 
these related articles and resources: 





9 Design Blogs to Tutorial9 Presents: Our Favorite Tutorial The New Tutorial9 
Follow in 2009 The Gift of Indexes, Directories 
Knowledge and Feeds 




















在 读 了 tutorial9.net 的 一 篇 文章 后 , 读者 面前 呈现 的 是 一 个 网 站 相关 文章 的 列表 ， 
这 就 是 上 下 文 导航 的 实例 。 












































vi 


在 那些 包含 很 多 按 级 别 排 列 内 容 的 网 站 ， 你 经 常会 发 现 面 包 居 。 你 也 会 发 现 
他 们 在 网 站 应 用 中 不 仅仅 只 有 一 步 ， 他 们 的 作用 像 一 个 进度 条 。 最 简单 的 形 
式 是 由 水 平 排列 的 ， 并 由 “大 于 号 ”( > ) 分 割 的 文字 链接 构成 ， 这 个 符号 8 


示 了 当前 页 面 的 级 别 。 
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Alle, SUA RBSUSIRAJEH RERA, FARERNE A 
很 好 的 主意 。 电 子 商 务 网 站 是 一 个 极 好 的 例子 : 大 量 不 同 的 商品 按照 逻辑 i 
行 分 类 。 对 于 没有 任何 分 级 和 分 组 、 只 有 一 级 的 网 站 不 应 该 使 用 面包 屑 导航 。 
来 决定 一 个 网 站 是 否 可 以 从 面包 届 导 航 中 获 益 的 一 个 方法 是 建立 一 个 站 点 
如 或 网 站 导航 结构 图 ，3 
导航 的 能 力 。 
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可 航 能 否 提 XE reg H3 户 在 不 司 类 别 > [8] 





M 

xd 

3 
z 
ij 
[s 























115 


现代 网 站 的 可 用 性 原则 







































































面包 屑 导航 应 该 被 看 做 一 种 额外 的 导航 特例 ， 不 应 该 取代 基本 的 导航 菜单 。 
它 是 一 种 便利 ， 一 种 二 级 导航 方案 ， 它 可 以 提醒 用 户 他 们 在 哪里 ， 并 提供 
不 同 的 浏览 网 站 的 方式 。 



















































































会 》ShopiFod )》iFodAcoessories ) Power 





Apple Store 





1-800-MY-APPLE 


Apple USB Power Adapter 
(Q search Store) 





Use this ultracompact and convenient USB-based to 
charge your iPhone or iPod at home, on the road, or whenever it's 
Shop Mac not connected to a computer. 








Shop iPod earn more | 
Shop iPhone : , | p 
Customer Rating A 
X oe He te pe (Based on 119 reviews) [ax 
Read allreviews» | Write a review p Enlarge images y 
苹果 网 店 在 主导 航 的 下 面 使 用 了 面包 届 。 这 是 补充 导航 的 一 个 例子 。 




















































































































通过 为 一 个 多 层级 的 网 站 的 全 部 页 面 提供 面包 必 路 径 ， 用 户 可 以 通过 很 少 的 
点 击 就 可 以 返回 到 更 高 级 别 的 分 类 ， 这 比 使 用 浏览 器 的 “后 退 ” 按 钮 和 基本 
的 导航 要 方便 得 多 。 男 外 ， 因 为 它们 通常 水 平 放置 并 且 样 式 简 单 ， 面 包 必 路 
径 不 会 占据 太 多 页 面 空 间 。 




































































































































































































































































































































































面包 届 路 径 是 吸引 第 一 次 来 访 的 用 户 通 过 登录 页 ( landing page ) 细 读 
中 站 的 绝 佳 方式 。 如 果 用 户 通过 Google 引擎 搜索 到 了 某 个 页 面 ， 看 到 面包 
朋 路 径 之 后 ， 它 们 可 能 会 点 击 更 高 一 级 的 页 面 去 看 相关 的 主题 。 作 为 回报 ， 
降低 了 网 站 的 整体 跳出 率 。 


415 重要 的 易 用 性 法 则 和 原则 


4.15.1 722 原则 
忆 为 人 脑 处 理 信息 的 能 力 是 有 限 的 ， 所 以 它 通 过 把 信息 分 成 块 和 单元 来 处 理 
复杂 问题 。 根 据 George A. Miller 的 研究 ， 人 们 短期 记忆 每 次 能 处 理 5~9 件 
事情 ， 这 经 常 被 作为 把 导航 菜单 的 选项 限制 在 7 个 以 内 的 依据 。 但 是 关 了 


“ l1» ZEL 3 ~ xh > A a. e 
7t2 ”的 争论 很 激烈 ， 以 至 于 我 们 并 不 完全 清楚 能 否 把 它 应 用 到 网 站 上 。 
























































































































































































































































































































































































































































































































































1 http://www.ddj.com/184412300, 
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4.15 重要 的 易 用 性 法 则 和 原则 众 妙 之 门 





4.15.2 ”两 秒 钟 法 则 

这 是 一 个 宽泛 的 理论 ， 即 用 户 在 使 用 某 类 系统 时 的 等 待 反应 ( 比如 : 功能 切换 
和 功能 载 入 ) 的 时 间 不 应 该 超过 两 秒 。 两 秒 的 推论 稍 显 武断 ， 但 是 这 却 是 一 个 
BE 的 数 级 。 个 更 可 SN ERU E: J SR 的 时 站 越 短 ， J 体验 越 好 。 





























































































































































































































4.15.3 3 次 点 击 法 则 

根据 这 条 原则 ， 用 户 在 3 次 点 击 之 内 如 果 还 没有 找到 他 们 想 要 的 信息 或 了 解 网 
站 的 特色 ， 他 们 就 会 离开 该 网 站 。 这 条 原则 突出 了 清晰 的 导航 、 符 合 逻辑 的 结 
构 和 易于 理解 的 网 站 层级 的 重要 性 。 在 大 多 数 情况 下 ， 这 与 点 击 的 次 数 是 无 关 
的 ， 但 是 用 户 始终 知道 自己 现在 在 哪儿 、 从 哪里 来 和 他 们 能 去 哪儿 是 很 重要 的 。 
如 果 用 户 觉得 他 们 对 系统 如 何 工 作 有 一 个 全 面 的 理解 ,即使 点 击 10 次 也 没 问题 。 


4.15.4 WHR 

帕 累 托 法 则 (CERA “DAKE” 8 “ARMPEE” ) Bj, 8096 
的 结果 是 由 20% 的 诱因 产生 的 。 这 是 商业 条 基本 的 经 验 法 则 ( 80% 的 
销量 来 自 20% 的 客户 )， 但 是 也 同样 适用 于 设计 领域 和 可 用 性 领域 。 比 如 ， 
对 那些 制造 出 80% 利润 的 20% 的 客户 的 关注 度 提 高 到 最 大 ， 就 会 对 你 的 收 
益 产 生 巨 大 的 改善 。 
































































































































































































































































































































































































































































































































































































































415.5 ”界面 设计 的 8 个 黄金 法 则 

Ben Shneiderman 通过 对 用 户 界 面 设 计 的 研究 ， 提 出 了 一 系列 适用 于 大 多 数 
交互 系统 的 准则 。 这 些 准 则 广泛 应 用 于 用 户 界 面 设计 ， 严 格 意义 上 说 ， 对 网 
站 设计 也 适用 : 
4. 保持 连贯 性 ; 
2. 允许 “ 老 鸟 ”使 用 快捷 方式 ; 
3. 提供 信息 反馈 ; 
4. 以 对 话 框 结束 操作 ; 
5. 提供 简单 的 错误 处 理 ， 
6. 允许 轻松 返回 上 一 步 ; 



















































































































































































































































































1 译 者 注 : 更 多 信息 请 参考 http://www.cs.utexas.edu/users/almstrum/cs370/elvisino/rules.html。 
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7. 满足 用 户 的 控制 需求 ; 
8. 降低 短期 记忆 负荷 。 


4156 BREE 

保罗 费 茨 发 表 于 1954 年 ， 费 茨 定 律 是 一 个 模拟 人 类 活动 的 模型 ， 以 目标 
距离 和 目标 规模 大 小 为 函数 ， 预 测 了 迅速 移动 到 目标 区 所 需 的 时 间 。 该 定律 
通常 应 用 于 访客 必须 从 A 点 移动 到 B 点 时 的 鼠标 移动 。 例 如 ， 这 条 定律 对 
如 何 放置 内 容 区 域 、 以 更 实用 的 方式 、 最 大 化 内 容 可 及 性 和 提高 内 容 点 击 率 ， 
是 非常 重要 的 。 


4.15.7” 倒 金字 塔 法 则 

倒 金 字 塔 是 把 摘要 放 在 文章 前 面 的 一 种 写作 方法 。 这 种 方式 使 用 了 新 闻 业 中 
著名 的 “瀑布 效应 ”一 一 新 闻 作 者 试图 让 他 们 的 读者 即刻 知道 他 们 报道 的 主题 。 
文章 以 结论 开头 ， 接 着 是 关键 词 ， 最 后 是 那些 次 要 的 细节 ， 比 如 背景 资料 。 由 于 
网 络 用 户 需要 即时 的 满足 , 这 种 倒 金 字 塔 风格 对 于 提高 用 户 体验 是 非常 重要 的 。 


416 ”给 用 户 一 个 5 万 英尺 的 视角 来 看 你 的 程序 


当 第 一 次 到 访 你 的 网 站 时 ， 一 些 用 户 可 能 会 感到 无 所 适 从 。 他 们 要 对 你 的 网 
站 传达 的 东西 个 整体 的 了 解 并 不 容易 ， 除 非 有 效 地 展示 了 你 的 信息 。 我 
门 应 该 仔细 考虑 一 些 组 织 内 容 的 方法 。 在 开始 做 这 个 之 前 ， 让 我 们 考虑 一 下 
与 之 相关 的 行业 。 
专业 的 建筑 师 创建 能 够 完成 某 种 特定 功用 的 结构 。 如 果 一 个 建筑 师 的 任务 是 
建 一 座 礼堂 ， 他 可 能 需要 从 研究 声学 
佳 的 听觉 效果 ? 给 预期 的 功能 一 种 确 
现在 考虑 一 下 图 书 t. 息 

一 个 储存 信息 的 地 方 。 但 是 设想 在 一 个 无 序 的 图 书馆 中 寻找 某 本 书 的 
现在 让 我 们 回 到 网 站 。 组 织 任何 有 很 多 内 容 或 很 强 功能 性 的 网 站 ， 这 些 方 
面 的 知识 都 必 不 可 少 ， 但 是 在 网 站 中 ， 我 们 把 它 称 为 信息 架构 (Information 
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' http://www.useit.com/alertbox/9606.html. 
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4.18 组 织 网 站 的 内 容 众 妙 之 门 



































Architecture， 简 称 IA )。 信 息 架 构 就 是 对 网 站 的 内 容 进 行 组 织 ， 以 便 达 到 最 
佳 的 信息 传递 效果 。 让 我 们 些 可 以 向 用 户 传达 网 站 理念 的 方法 。 


4.17 心理 模式 和 象征 物 


户 访问 你 的 网 站 也 是 来 完成 某 项 任务 的 。 他 们 会 欣赏 网 站 视觉 设计 和 美妙 
的 图 像 ， 但 是 在 第 一 次 到 访 后 ， 他 们 只 希望 按 日 常 习惯 使 用 你 的 网 站 。 
此 ， 考 虑 一 下 用 象征 物 来 展现 你 的 服务 。 象 征 物 是 一 种 介绍 你 的 产品 或 服 
捷径 ， 几 乎 不 需要 解释 ， 好 的 象征 物 已 经 把 你 的 产品 或 服务 和 用 户头 脑 
的 信息 或 心 里 模型 ) 结合 起 来 。 


4.18 组织 网 站 的 内 容 


人 们 在 头脑 中 会 有 日 常生 活 中 事物 如 何 发 挥 功能 的 “路 径 图 ”"。 比 如 在 某 个 
早上 ， 一 个 人 知道 他 必须 听 到 闭 钟 后 起 床 、 吃 早餐 、 读 报 、 洗 澡 、 穿 衣 ， 然 
瑟 开 车 去 上 班 。 所 有 的 这 些 过 程 都 是 每 天 早晨 要 做 的 事情 的 一 部 分 ， 人 们 和 
天 都 会 重复 这 一 过 程 。 
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Hello, Andrew Maler. We have recommendations for you. (Not Andrew?) 
Andr mT sv c Lists (v 





amazoncom 
— 


The Rails Way (Addison-Wesley Professional Ruby 
Series) (Paperback) 
by Obie Fernandez (Author) 
pe NN 
Liet Price: $40.00 

Price: $31.49 & this item ships for FREE with Super Saver 

Shipping. Details 

You Save: $18.50 (37%) 





In Stock. - 
Ships from and sold by Amazon.com. Gift-wrap available. More Buying Choices. | 


Want it delivered Thursday, May 14? Order it in the next 20 hours and 45 62 used & new from $25.00 
minutes, and choose. Shipping at checkout. Details Sa 


Have one to sell? 
42 new from $31.01 20 used from $25.00 








Share your own customer im: 














ae oe ————HÓÀ9À fa 


马 逊 网 站 人 允许 你 把 要 购买 的 东西 放 入 “购物 车 ”( shopping cart )， 但 实际 上 它 仪 
仅 是 公司 数据 库 中 的 项 目 列 表 。 亚马逊 为 什么 这 样 做 ? 因为 对 于 复杂 的 技术 细节 而 
言 , 购物 车 是 一 个 很 方便 的 象征 物 , 它 可 以 在 你 浏览 网 站 的 时 候 保 存 你 购物 的 列表 。 
当然 如 果 你 浏览 的 是 Amazon.co.uk， 它 会 被 写成 “购物 管 ”( shopping basket )。 
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如 果 你 的 网 站 包含 大 量 的 内 容 ， 则 需要 寻找 一 个 合理 的 方式 组 织 它 。 进 行 分 

类 是 一 个 好 的 起 点 ， 也 就 是 把 内 容 分 成 语义 相关 联 的 组 。 这 个 理想 解决 方案 

只 需要 极 少 的 开支 ， 但 却 对 用 户 非常 有 用 。 按 读者 的 预期 设计 一 个 合理 的 分 

类 方案 ， 建 立 一 套 基于 文字 和 短语 的 分 类 法 。 
内 


(以 及 优化 网 站 搜索 结果 ) 的 方式 是 使 用 元 数据 ， 也 就 是 关 
于 数据 的 数据 。 "元 数据 ” 听 起 来 有 点 难 懂 ， 但 是 实际 上 你 已 经 与 它 打 了 入 
长 时 间 的 交道 。 比 如 ， 一 篇 博客 文章 的 元 数据 包括 作者 、 出 版 日 期 、 浏 览 次 
数 和 评论 次 数 等 。 这 类 数据 允许 用 户 对 网 站 的 内 容 进行 搜索 和 排序 ， 这 将 为 
他 们 提供 可 以 操作 的 内 容 列表 ， 进 一 步 通 近 他 们 的 目标 。 
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IKEA’ 


(Sea) e Find an IKEA store Loa In 


Join our email list My Account 


welcome! Ask annat Información en español 





? Find oroducts by name 


ES s 
p iribokes. Shop online 
=" DNE cs 
ES pte 
eS 
ET rr 
Coffee & tea. 
T 
Kitchen & dining textiles a Eeer yha 
Shop at your local 
I store 
Fo NUR 
Mure 
POET RE — m 
" —- 
Conference tables 


Sn 2 Check Product 
pace dining Hvalabity 
rater dl 






Flooring. 
Flooring 
Vases, bowls à flowers 
Beds & mattresses Transport & assembly 
Double beds Transport B assembly. 
Mattresses 
Sinale beds 
Guest, bunk & loft beds 
Sofa beds 
Children’s beda 
Clothes storage Children's IKEA 
Nightstands & other storage Childrens mattresses 
Wardrobes Nursing & changing tables 
storage systems 
Hankes & hangers Sleeping 
Chests of drawers Eating 
‘shoes organizers Staring 
Shoe, coat A hat orks Playing 


2 Children's textiles 
Shoe cabinets Children's decoration 
Laundry A cleaning Children's lighting 
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家 的 网 站 很 好 地 使 用 了 导航 。 在 网 站 顶部 ,宜家 的 狂热 粉丝 可 以 通过 点 击 “New” 
快速 找到 最 新 和 最 热 的 家 具 。 如 果 你 正在 寻找 某 类 产品 ， 宜 家 会 为 你 提供 一 个 
结构 清晰 的 站 点 地 图 。 


4.19 ”提供 站 点 地 图 


如 果 你 的 网 站 包含 很 多 内 容 ， 站 点 地 图 是 一 种 很 好 的 导航 方式 。 站 点 地 图 就 
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4.21 众 妙 之 门 




















是 一 个 页 面 或 栏目 ， 它 以 直观 的 方式 展示 网 站 上 可 以 访问 的 页 面 。 考 虑 一 下 
结构 展示 在 页 脚 中 或 提供 指向 它 的 链接 。 


4.20 ”使 用 帮助 
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TE 7N : 吏 用 帮助 ” E Hx 接 的 向 j 户 介绍 网 站 的 方式 。 不 去 的 是 ， 这 也 
是 你 的 网 站 上 最 可 能 被 忽略 的 部 分 。 大 部 分 用 户 会 直接 忽略 那些 对 服务 进行 
描述 的 大 块 文本 。 























































































































E 因 如 此 ， 一 些 有 助 于 向 用 户 展示 网 站 如 何 工作 的 最 佳 实现 方式 脱颖而出 ， 
些 实现 方式 不 依赖 于 大 块 的 文本 。 这 里 有 一 系列 提供 使 用 帮助 的 方法 ， 它 
门 使 用 很 少 的 文本 或 根本 不 使 用 文本 。 


4.20.1 白板 

















































































































































































































































































































白板 提供 了 可 视 化 的 引导 用 户 的 方法 。 这 个 想法 很 简单 : 展示 一 张 图 片 ， 
它 显示 了 在 包含 数据 的 情况 下 你 的 网 站 看 上 去 是 什么 样子 的 。 看 了 这 个 如 何 
全 用 网 站 或 是 应 用 的 例子 ， 用 户 就 会 知道 该 怎样 与 之 进行 交互 。 


4.20.2 产品 介绍 和 内 庶 帮 助 

可 以 考虑 把 产品 介绍 融入 到 界面 的 各 个 部 分 。 现 在 流行 的 多 栏 布 局 ， 使 网 站 
包含 这 类 文档 变 得 比 以 往 任 何 时 候 都 容易 。 如 果 用 户 对 某 个 特殊 的 功能 有 疑 
问 ， 他 不 用 离开 当前 页 面 就 可 以 获得 答案 。 
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4.21 建立 信任 


售 任 是 你 的 网 站 在 用 户 心中 必须 营造 的 最 重要 的 事情 之 一 。 信 任 是 一 条 基本 
原则 ， 难 以 表述 但 是 极为 重要 。 很 多 研究 将 正面 的 用 户 体验 等 同 于 对 网 站 本 
身 的 信任 感 。 
建立 信任 : 想 一 下 生活 中 所 有 你 信任 的 东西 ， 并 问 你 自己 , “为 什么 你 信任 
它们 ?“。 考 虑 一 下 可 信和 度 、 透 明度 和 慷慨 程度 。 尊 重 你 的 用 户 ， 显 示 出 你 
对 他 们 的 信任 和 专注 的 感激 之 情 。 
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Account overview 

Welcome to your motigo account! To create a new service just click one of the 
create-links below. Take some time to read more about our services or study help & 
tutorials. If you have any questions don't hesitate to contact our friendly, 
multilingual support. 


Your motigo services 

EJ Create a new counter EJ Create a new forum 
EJ create a new guestbook E Create a new shorturl 
图 Create a new calendar 


Once you have created a service, your account overview 
will look like this... 


Bi Forums (3) Aw 
Support forum Zi 
Feature discussions Za 
Create a new forum 

[i Guestbooks (3) z 
Motigo questbook F 




















Motigo 的 用 户 在 他 们 添加 内 容 之 后 能 够 经 而 易 举 地 看 到 他 们 的 操作 界面 将 是 什 
么 样子 。 


4.22 ”不 要 让 用 户 毁 掉 自 己 的 用 户 体验 


# 运 的 是 ， 现 代 网 站 通常 会 遵循 这 条 建议 。 虽 然 它 主要 应 用 于 互联 网 应 用 程 
中 ， 但 是 它 对 那些 内 容 驱动 的 网 站 同样 适用 。 用 户 会 测试 你 的 应 用 程序 的 
极限 。 如 果 用 户 可 以 删除 内 容 ， 那 么 请 为 他 们 提供 一 个 “恢复 ” 功能。 如果 
户 可 以 在 输入 信息 时 关闭 浏览 器 ， 在 没有 询问 之 前 不 要 抛弃 他 们 的 数据 。 
如 果 用 户 在 保存 文档 的 过 程 中 可 以 关闭 浏览 器 ， 不 要 删除 保存 的 数据 。 在 这 
些 案例 中 ， 要 考虑 到 用 户 不 会 按照 你 预期 的 方式 使 用 你 的 服务 ， 因 此 尽量 不 
要 使 结果 让 人 无 法 接受 。 

不 要 要 求 太 多 而 给 予 太 少 

在 为 设计 最 新 、 最 好 的 用 户 交互 努力 的 过 程 中 ， 许 多 设计 师 忽略 了 作为 有 经 


验 的 设计 师 应 该 遵循 的 一 条 原则 :不 要 破坏 任何 事情 。 一 些 设计 师 知道 的 比 
这 个 要 多 , 但 是 现代 网 站 设计 却 并 不 是 没有 遇 到 阻碍 。 所 以 让 我 们 澄清 一 下 ; 
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4.23 及早 测试 、 经 常 测试 众 妙 之 门 






































任何 作为 用 户 浏览 器 一 部 分 的 功能 ， 都 不 应 该 偏离 用 户 使 用 网 站 的 经 验 。 

最 基本 的 元 素 通常 被 最 先 破坏 。 不 要 屏蔽 的 “后 退 ” 按 钮 ; 不 要 限制 用 
为 你 的 网 站 加 书签 的 能 力 ; 不 要 在 并 非 必要 的 情况 下 修改 用 户 已 浏览 和 未 
览 的 链接 的 颜色 。 很 多 刚 入 门 的 用 户 和 中 级 水 平 的 用 户 很 大 程度 上 要 依赖 







































































































































































































































































水 
— 

































































这 些 特性 来 浏览 网 站 。 浏 览 器 的 这 些 功能 对 他 们 的 体验 十 分 重要 。 

ES T T dk Dama Now x 
Robin Hood: Men in Tights has been removed Undo 

[7 "RP Secretary WR RR independent Now X 

[B "È" Sixteen Candles RRR Romance Now x 


























除 后 ， 网 站 提供 了 恢复 操作 的 服务 。 











当 你 在 Netflix 序列 中 的 一 项 内 容 被 册 






























































总 体 来 说 ， 一 种 更 具 渗 透 性 的 不 信任 感 正在 交互 设计 师 及 其 用 户 之 间 酝 酿 。 
许多 交互 活动 应 该 跨 浏 览 器 进行 测试 ， 在 那些 能 被 用 户 屏蔽 的 功能 不 起 作 
的 情况 下 ， 交 互 活动 仍 能 表现 良好 。 不 言 而 喻 ， 一 个 好 用 网 站 的 前 提 应 该 是 
一 个 可 以 使 用 的 网 站 。 
最 后 ， 要 让 用 户 知道 你 的 网 站 是 否 支持 他 们 正在 使 用 的 浏览 器 ， 不 要 让 他 们 
自己 去 猜 。 只 有 在 你 告诉 他 们 之 后 ， 他 们 才 会 知道 他 们 也 可 以 应 征 加 入 浏览 
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4.23 ”及早 测试 、 经 常 测试 


所 谓 的 TETO 原则 应 该 被 应 用 到 每 一 个 网 站 设计 项 目 ， 因 为 可 
会 为 布局 的 问题 和 难题 提供 至 关 重 要 的 参考 。 
测试 不 要 太 晚 、 测 试 不 要 太 少 ， 也 不 要 为 错误 的 理由 进行 测试 。 测 试 要 有 正 
当 的 理由 ， 大 多 数 设 计 决 定 都 是 局 部 的 ， 理 解 这 一 点 很 重要 。 你 不 能 准确 无 
误 地 回答 一 个 布局 是 否 优 于 男 一 个 布局 ， 因 为 你 需要 从 特定 的 视角 进行 分 析 






































性 测试 经 常 
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第 4 章 现代 网 站 的 可 用 性 原则 





0/ 0 
Vlad himp SIGN UP FREE 


FEATURES PRICING CUSTOMERS RESOURCES SUPPORT ABOUT US BLOG 








=~ We Make Email Marketing Easy & Fun 
4 For Over 80,000 Users 


Start sending effective email campaigns free 


g Manage Your Subscribers 4€ Design Beautiful Emails Bl Track Your Campaigns x Free Subscribe Forms 






































MailChimp 在 它 的 主页 展示 了 一 个 视频 的 范例 , 以 便 用 户 能 够 快速 学 会 如 何 使 用 该 网 站 。 


一 些 需要 记 住 的 要 点 

。 根据 Steve Krug 的 观点 ， 测 试 一 个 用 户 一 定 要 比 一 个 用 户 都 不 测试 好 ， 
在 早期 测试 一 个 用 户 要 比 在 后 期 测试 50 个 用 户 好 。 根 据 Boehm 第 一 
定律 ， 错 误 最 常 发 生 在 需求 阶段 和 设计 阶段 ， 越 晚 发 现 这 些 错误 ， 付 
出 的 代价 越 高 。 

测试 是 一 个 反复 的 过 程 ， 这 意味 着 你 设计 一 些 东西 、 测 试 它 、 修 正 它 ， 
然后 继续 测试 它 。 你 可 能 会 发 现 一 些 在 第 一 轮 测试 时 被 忽略 的 问题 ， 
因为 用 户 的 注意 力 已 经 被 其 他 问题 吸引 。 


。 可 用 性 测试 总 是 会 产生 有 用 的 结果 。 它 们 既 指 出 了 功能 上 和 交互 性 上 
的 错误 ， 也 指出 了 主要 的 设计 瑕 六 ， 它 们 从 以 上 这 两 个 方面 为 你 的 设 
计 提 供 了 有 益 的 见地 。 

。 根据 Weinberg 定律 ,一 个 开发 者 不 适合 测试 自己 写 的 代码 。 这 也 适用 
于 设计 师 。 在 为 一 个 网 站 工作 了 数 周 之 后 ， 你 已 经 再 也 无 法 凭借 肉眼 
识别 任何 问题 。 你 知道 一 个 网 站 是 如 何 构建 的 ， 因 此 你 非常 清楚 它 是 
怎样 工作 的 ， 而 测试 者 和 用 户 并 不 了 解 。 

底线 : 如 果 你 想 做 一 个 非常 棒 的 网 站 ， 你 必须 进行 测试 
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当 我 们 开始 着 手 改善 用 户 体验 时 ， 我 们 面 对 的 最 大 挑战 是 该 从 哪里 入 手 ! È 
[能 会 让 人 有 种 挫败 感 ， 但 是 却 是 一 个 好 的 开始 。 这 里 有 很 多 你 可 以 考虑 的 
方式 ， 来 使 你 的 网 站 显得 更 加 有 吸引 力 。 


付出 努力 ， 最 终 你 将 会 得 到 一 个 用 户 和 你 都 喜欢 的 产品 。 我 们 希望 在 这 里 讨 
论 的 大 多 数 观点 可 以 应 用 到 你 的 项 目 中 去 。 


。 虽然 创意 个 好 东西 ， 但 是 不 要 证 创意 盖 过 了 设计 过 程 本 号。 不 要 把 界 
面 设计 得 大 过 新 颖 ， 以 至 于 一 般 的 网 络 用户 难 以 明白 如 何 使 用 它 。 


创建 可 预知 的 网 站 ， 设 计 用 户 期 望 的 东西 。 不 用 试图 使 用 未 来 网 站 的 
特色 ， 除 非 它 对 完成 旧 的 任务 具有 明显 的 优势 或 更 加 直观 。 
用 户 会 快速 浏览 网 站 ， 不 会 停 下 来 看 那些 设计 者 花 了 很 多 时 间 精 心 雕 
琢 的 细节 。 如 果 你 能 够 使 他 们 更 加 容易 地 从 一 处 跳 转 到 另 一 处 ， 或 帮 
助 他 们 找到 自己 需要 的 东西 ， 他 们 会 更 加 欣赏 你 的 工作 。 记 住 ， 很 多 
用 户 仅 仅 硕 望 把 使 用 网 站 当做 日 常事 物 的 一 部 分 。 


在 投入 视觉 设计 之 前 ， 花 一 些 时 间 规 划 你 的 用 户 将 如 何 使 用 网 站 C 
面 设计 )， 他 们 会 如 何在 网 站 上 进行 导航 〈 导 航 设计 )， 以 及 网 站 将 会 
如 何 与 他 们 进行 交互 〈 信 息 设 计 ) 

不 时 用 标识 告诉 用 户 他 们 在 网 站 中 的 位 置 。 知 道 自 己方 位 的 用 户 更 容 
易 建 立 目标 感 。 


沿用 导航 惯例 。 如 果 用 户 不 清楚 他 们 能 够 去 哪里 ， 在 进行 导航 的 时 候 
将 会 遇 到 困难 。 在 设计 导航 的 时 候 ， 不 要 停 在 第 一 个 层级 : 为 每 个 网 
页 都 设计 全 局 导航 、 本 地 导航 和 上 下 文 导 航 。 通 过 让 内 容 按 语义 关联 
进行 分 组 ,来 帮助 用 户 找到 他 们 正在 寻找 的 内 容 。 

总 是 预想 用 户 不 会 按 你 的 预期 使 用 你 的 网 站 。 设 想 一 下 他 们 会 如 何 误 
用 你 的 网 站 , 不 要 让 误 用 造成 难以 接受 的 后 果 ( 比如 , 在 没有 提供 “ 恢 
复 ” 选 项 的 情况 下 删除 一 个 文档 )。 
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Dmitry Fadeyev 











网 站 设计 、 可 用 性 和 用 户 体验 中 超 炫 色彩 终极 使 用 指南 















































色彩 在 网 站 设计 中 如 何 吸引 用 户 注 意 力 ， 为 决策 提供 信息 ， 引 发 行动 ， 组 织 
言 息 ， 突 出 元 素 ， 平 衡 结 构 和 丰富 用 户 体验 ”本 章 将 探索 这 些 问题 并 列举 一 
些 好 的 网 站 色彩 使 用 实例 。 



















































































































































































研究 发 现 ， 因 为 早 基 gan 2 寻找 配偶 、 躲 避 敌 害 和 危险 环境 的 需要 ， 原 始 
色彩 。 如 果 没 有 色彩 视觉 ， 区 分 毒性 致命 

的 绿色 马 樱 丹 (lantana camara a) ee 的 红色 马 樱 丹 浆 果 将 会 变 
Ah r 


nl 












































































































































我 们 现在 收集 、 体 验 、 分 析 、 筛 选 信息 的 速度 远 远 高 于 我 们 的 祖先 ， 尤 其 是 
à MAASAI, Rit PMPMERARRS ELA, BEENA 
可 以 产生 很 糟糕 的 用 户 体 验 。 因 此 ， 理 解 色彩 如 何 塑造 并 改善 访客 体验 和 与 
设计 的 互动 是 很 重要 的 。 
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你 可 能 想 一 下 就 投入 到 令 人 望 而 生 晨 的 色彩 灵感 和 色彩 信息 的 世界 ， 但 是 首 
先 讨论 一 些 色彩 基础 知识 、 色 彩 学 理论 和 描述 色彩 的 术语 非常 重要 。 我 
们 打 好 了 这 些 基础 ， 我 们 随处 都 可 以 对 色彩 进行 探索 并 寻找 灵感 。 


色彩 入 门 


我 们 的 眼睛 有 3 种 不 同 颜色 的 色彩 接收 器 ， 分 别 对 红 、 绿 、 蓝 3 种 颜色 做 出 
反应 。 比 如 ， 蓝 色 对 相应 的 接收 器 刺激 要 大 于 其 他 的 接收 器 ， 结 果 是 使 它 向 
大 脑 传送 不 同 的 信息 。 通 过 这 种 方式 ， 不 同色 彩 混合 后 会 产生 数 以 百 万 计 的 
颜色 BRA BE (hue ), 影响 不 同 的 接收 器 。 这 些 色调 可 以 通过 一 个 圆 ( 通 
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1 Regan, B. C., Julliot, C., Simmen, B., Vienot, F., Charles-Dominique, P. & Mollon, J. D. 2001 Fruits, foliage and the 
evolution of primate colour vision. Phil.Trans. R. Soc. Lond. B. 36, 229-283, 
2 SE: 更 多 关于 马 樱 丹 的 信息 请 参考 : http:/commons.wikimedia.org/wiki/Lantana_camara?uselang=zh-cno。 
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常 被 称 为 色 盘 ) 以 度数 的 形式 展示 。 每 60° 会 产生 一 个 不 同 的 基色 。 这 些 
基色 中 的 3 个 被 称 为 第 一 原色 ( 红 、 绿 、 监 ), 另外 3 个 被 称 为 第 二 原色 ( 黄 
、 品 红 )， 它 们 之 间 的 6 个 基色 被 称 为 第 三 原色 。 


个 通用 的 计算 模型 被 称 为 HSB。 它 使 用 色 度 和 其 他 两 个 相关 的 术语 
饱和 度 ( saturation ) 和 亮度 ( brightness) 一 一 来 定义 和 描述 色彩 。 饱 和 度 
( 0~100% ) 是 指 色彩 的 鲜明 程度 与 它 最 大 可 能 的 鲜明 程度 的 比值 。 亮 度 是 指 
色彩 的 明亮 程度 ( 0~100% )。 纯 色 具 有 最 高 的 亮度 和 饱和 度 ， 使 它们 看 起 来 
更 加 人 鲜明。 暗色 亮 度 较 低 ,使 它们 看 起 来 暗 一 些 。 颜 色 越 不 饱和 ,看 起 来 越 淡 ， 
饱和 度 为 0 时 完全 没有 颜色 。 正 如 你 从 电脑 截屏 上 看 到 的 那样 ， 很 多 颜色 
可 以 通过 一 个 色调 值 和 不 同 的 自 、 黑 、 灰 色 度 (shade) 合成 。 
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在 数字 化 设计 中 第 一 原色 是 红 、 绿 和 蓝 。 第 二 原色 是 青 、 品 红 和 黄 ， 在 色 盘 上 ， 
两 类 原色 之 间 是 6 个 不 同 的 色 度 。 色 度 值 用 度 来 描述 (9 )， 用 十 六 进 制 表示 的 
By E ZEE). 
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网 站 设计 、 可 用 性 和 用 户 体验 中 超 炫 色彩 终极 使 用 指南 
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o% o% 
通过 调整 色 度 的 亮度 和 饱和 度 ， 大 概 每 个 色 度 可 以 得 到 46000 种 不 同 的 颜色 。 




























































































色 度 
亮度 和 饱和 度 是 比较 复杂 的 概念 ， 容 易 产生 误解 ， 这 使 它们 在 讨论 颜色 时 不 太 
常用 。 
































也 许 讨 论 颜 色 时 使 用 色彩 (tint )、 色 度 (shade) 和 色调 (tone) 这 3 个 术 
语 是 有 好 处 的 。 当 一 个 设计 师 说 “我 喜欢 这 个 Logo 的 颜色 ， 但 是 它 的 色 度 
应 该 更 深 一 些 ” 时 ， 你 会 清楚 地 知道 他 是 什么 意思 。 


把 色调 、 饱 和 度 和 亮度 结合 起 来 ， 我 们 就 可 以 创建 任何 一 种 人 有 眼 可 见 的 
颜色 。' 很 多 计算 机 显示 器 通过 红 、 绿 和 蓝 三 原色 的 混合 呈现 色彩 。 历 

上 ， 艺 术 家 曾经 使 用 红 、 黄 和 蓝 作为 原色 。 印 刷 工 业 使 用 青 、 品 红 、 黄 
和 黑 来 产生 不 同 的 颜色 。 计 算 机 使 用 红 、 绿 、 蓝 三 原色 ， 因 为 显示 器 


* 


发 出 这 3 种 不 同 的 光 。 通 过 对 每 种 颜色 在 0~255 之 间 的 赋值 ， 计 算 机 
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1 Backhaus, W., Reinhold, K. & Werner, J. S. 1998 Color Vision, Walter de Gruyter & Co., New York, p. 321. 
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显示 器 能 够 生成 16777216 种 不 同 的 颜色 。3 种 原色 以 最 大 值 ( R:255, 
G:255, B:255 ) 混合 时 ， 将 产生 纯 白 色光 ， 而 3 种 原色 的 值 都 是 0 时， 不 
产生 任何 光 ， 也 就 是 产生 黑色 。 此 类 颜色 混合 通常 使 用 的 是 RGB 色彩 
模型 。 


浏览 器 可 以 识别 十 六 进 制 以 # 号 开头 的 网 页 色彩 值 。 一 种 颜色 的 红 、 黄 、 蓝 
三 原色 值 ， 由 数字 (0-255 之 间 ) 转化 成 了 一 组 计算 机 可 以 理解 的 字符 。 在 
于 一 色 阶 结束 时 ，0 被 替换 成 了 “00"， 而 255 被 替换 成 了 “FF"。 第 一 原色 
转化 成 十 六 进 制 之 后 变 成 了 #FF0000 ( £T ). #00FF00 ( 绿 )、#0000FF ( 蓝 )。 
很 多 图 形 应 用 程序 可 以 在 HSB 值 、RGB 值 和 十 六 进 制 值 之 间 自 动 转化 ， 但 中 
臣 为 一 个 设计 师 ， 理 解 每 一 个 体系 将 有 助 于 你 更 加 轻松 地 完成 工作 。 
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51 色彩 学 理论 


色彩 学 理论 研究 的 是 纯色 之 间 的 关系 ， 以 及 它们 混合 的 效果 。 我 们 将 研究 一 
些 使 用 最 广泛 的 色彩 关系 或 配色 方案 ， 同 时 给 出 它们 在 当前 网 络 应 用 中 的 实 
例 。 设 计 一 个 配色 方案 通常 是 决定 设计 中 将 哪些 颜色 放 在 一 块 视 觉 效果 最 好 
的 第 一 步 。 接 下 来 的 每 一 张 截屏 中 ， 调 色 板 显示 了 截屏 中 使 用 的 主要 颜色 ， 
纯色 色调 在 色 盘 中 被 标记 了 出 来 ， 以 便 显示 色彩 关系 。 
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网 站 设计 、 可 用 性 和 用 户 体验 中 超 炫 色彩 终极 使 用 指南 








BE: 使 用 一 种 色调 不 同 的 饱和 度 和 亮度 
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QUICK JOB SEARCH 


Lad | 
CNET | 


TWITTER UPDATES 










WP Strategin Annnint Director. 
strategic and creative account 


DIGITAL MEDIAS) 


RECRUITMENT 





Wes plese, 
qp. Production Director. fluffy ad 





Wo Snr Project Manazer/ Project 
Director only the best need apply... 


WELCOME WELCOME WELCOME 


Our uniqueness is simple 





$ We represent the most talented digital media specialists in the market, working. Freelance user interface designer, 
with them to achieve their best. Two month contract for a talented 


= We don't just say we listen we actually do, Ey 


> We are hoot! believers tiat Ure usual recruitment praviive uf "squareye = round | 
hole - push and fingers crossed" method DOES NOT WORK. ka ee en nf 


A job is not a hole that needs filling but an opportunity that is waiting to be 
teint inre is [ERES end on BERI a | 


get instant job updates in your Mobile! 
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近似 或 混合 : 使 用 色 盘 中 邻近 的 色调 





近似 调 色 板 








Edt yew Hatery Bookmarks Took Deb 
B® € X o © [Shooto 


old loft weh design & development 











{ let's work together } 


Old loft is a web & design studio. Whether you are a small business or 

a largo company, wo deliver bost zalutionc that give you the strangest 
advantages. We can help to develop your project anytime and anywhere. 
Building web apps and websites is our passion, so be sure that your 
questions wil be answered. Contact us to get your free quate. 












近似 配色 方案 
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三 分 色 阶 : 使 用 色 盘 中 彼此 等 距 的 三 个 色调 





三 分 色 阶 调 色 板 























idee e strumenti per 
la co’m.oo’nicazione 


AY Aeomu|ni oa zió]ne 
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home  chisiamo servizi portfolio contatti 


a primavera risveglia il 
tuo sito! 


pubblicato in: Web marketing, News 

In questo artikolo è nostra intenzione presentarVi i nuovi pacchetti offerti da 
MULTIWAYS//E-Strategies e dalla divisione Moovents. 

| pacchetti di servizio proposti per le varie tipologie di offerta si incentrano sulle azioni di 
marketing innovation, sulla realizzazione e promozione di eventi sia online che offine, sul 


wikim.oo(f) english page (9 


marketing online, ed in concreto, possono essere di vari tipi 


tags: organizzazione eventi, posizionamento online, pr online, 


三 分 色 阶 配色 方案 
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四 分 色 阶 : 使 用 色 盘 中 彼此 等 距 的 四 个 色调 


























Bookkeeping 2 in a box! 


LEARN ORGANIZE PROTECT 
Learn More N [IE BuyNow © 


There's got to 
It's so simple! 全 站 be a better way! 





-..your papers, your budget, .Your books, your checkbook, 
your investments, ... Your Life! your accounts, ...Your Business! 


Personal Record Keeping Made Simple is un 





of Categorize and prioritize all of your mail, - File correctly the first time. allowing you to 


including email and faxes find any document in 60 seconds! 
Learn what important papers you need to keep «ff. Cutbookkeeping time by 50% 
MI y 


of Prepare your fies for easy and quick yearend 


of Store your documents in a logical and simple Aiakas i 


system that is easy to access when needed 


of Qrtanize a special medical section to track all 
expenses and payments 


Have you peace of mind knowing that in an. 
emercencv vour family can find anv document = 


四 分 色 阶 配色 方案 


File hard copies of the correct documents for 
income and expense records 


- Work in the round to maximize efficiency and 
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近似 互补 : 使 用 两 个 互补 色调 和 一 个 与 其 中 一 个 颜色 相近 色调 





E 05/04/2009 1 05/04/2009. 
ENCUENTRO LATINO 2009 BNCUENTRO LATINO 2009 
Dopo it grande successo dell'edizione dello scorso anno, l Jae osse co teca 
ENCUENTRO LATINO 2009 si preannuncia ancor piü coinvolgente 

"Wl. ed emozionante. Ad allietare la serata la musica dal vivo dei 
CROMA LATINA, la band latina n* 1 in Italia, e gli spettacoli 
presentati dalle migliori scuole della regione. Ospite della serata il 
presidente regionale FIDS prof. Luigi [...] 





近似 互补 配色 方案 
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中 间 色 : 使 用 没有 色 度 的 颜色 
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V FIND YOUR HOTEL. 1 BOOKWITHUS 1 cALLUS. 
BY DESTINATION » — : 
BY SPECIAL OFFER» - | (ise 
p 24HOURS | 
| 














间 色 配色 方案 
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网 站 设计 、 可 用 性 和 用 户 体验 中 超 炫 色彩 终极 使 用 指南 





RE: 使 用 色 盘 顶部 的 颜色 ,使 用 分 布 在 271” 和 90” 之 间 的 色 














aburcreative conindex Per 


albuma% hifidelity 


arketing 
3 PROCESS — ` i A i E STUDIO 
E X eer AS 


WE BUILD 


ROCKSTAR BRANDS 


Lat us help your company Ge Platinum 





BRAND-BUILDING PROCESS ELATINUMICASES: 
Our proven marketing process helps companies of all genres 
je 


reach pl. ic bi 





achieve 
e Brand Tuning 
Dialing in the Strategy 


X Brand Balancing 





暖色 配色 方案 








142 


众 妙 之 门 








冷色 : 使 用 色 盘 底部 的 颜色 ， 使 用 分 布 在 91” 和 270” ZANE 
调 
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Tropical Sky Diving - Mozilla Firefox 
Bookmarks Tools 
EOM ur ©) [TE [torso hoidaysscubsdiving.co.uk) 





















re | owne rois RO 


Special Offer - Kuedu 
Island Maldives 





From £899 per person. 
Travel dates O1st May - 


15th July 
ist travel. Price includes 


Our Top Scuba Diving Destinations 


MALDIVES M CAYMAN ISLANDS 
" hs 4 


ar round 


t is important to know our dream diving holid 


alin fuelled 
Winner of the Sunday Times Travel Magazine Experts Awards 2007. 
Tropical Sky Specialist Sites. Site Map 


冷色 配色 方案 
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5.2 ”色彩 和 易 用 性 









































色彩 不 但 可 以 使 你 的 网 站 赏心悦目 ， 还 可 以 帮助 读者 使 用 网 站 。 设 想 一 下 ， 
如 果 你 的 网 站 还 是 白 底 黑 字 就 像 早期 报纸 那样 一 一 情形 会 怎么 

1982 年 ,《 今 日 美国 》( USA Today ) 率先 推出 了 彩色 报纸 。 不 但 很 多 版 面 配 
彩 图 ， 它 还 使 用 了 色彩 来 区 分 板 面 ， 所 以 读者 可 以 轻而易举 地 发 现 他 们 感 
兴趣 的 板 面 。 对 于 新 用 户 和 回头 客 而 言 ， 这 个 理念 在 网 站 设计 中 都 很 重要 。 
通过 添加 彩色 的 按钮 ,《 今 日 美国 》 把 这 一 理念 应 用 到 了 它们 的 网 站 之 中 ， 
这 些 按钮 和 纸 版 报纸 的 板 面 是 相对 应 的 。 它 为 每 个 不 同 的 版 面 选 择 了 不 同 的 
颜色 。 然 而 不 幸 的 是 ，“Home”、“News” 和 “Travel” 这 几 个 版 
常 相近 的 蓝 色 色调 ， 有 时 这 可 能 会 误导 用 户 。 

















































































































Fo 在 





















































































































































































































































































































































































































































































































































axe 
rg 

EN 
NITE 
E 



























































































































Travel «Destinations «Todayinthe Sky “Hotels «Cruises “Deals «Experts 


PNG AME photo contest. | Top headlines. 

" rare eae 

Today in the Sky: 
American 757s to fly 
overseas routes 


foal one 
Hotel Checkin: Ca. 

hotels drop no-pet 但 
policies for fire 

evacuees 


Cruise Log: Wi 
assengers tell the 
fruth on health forms? la t 


mmm 





Smoky Mountains celebrate 75 
years as the 'people's park’ 






for enone with Mom 
! Mother's Day and the memories will keep on 


Today in. 


Today in the Sky wins 2003 EPpy award. 
Tomte fae Sy hes just been giron the 2008 
si Busi 






































Flight Center 
《今日 美国 》 使 用 了 色 和 采 来 帮助 读 者 快速 定位 版 面 ， 它 自 1982 年 开行 业 之 先河 




































































以 来 ， 坚持 这 样 i. 
























































Mint.com 成 功 地 使 用 了 色彩 来 帮助 潜在 客户 理解 它 的 服务 ， 并 劝说 他 们 采取 
行动 。Mint 主页 上 最 引 人 注 目的 色彩 元 素 是 使 用 了 双 互 补 色 配 色 方 案 的 个 





































































































1 Garcia, M. R. Jun 18 2008 The color evolution of USA Today: a three-minute interview with Richard Curtis, http:// 





garciamedia.com/blog/articles/the color evolution of usa today a three minute interview with richard curts 


144 


众 妙 之 门 


















































人 理财 数据 图 表 和 写 着 “Freel Get started here" ( 免费 ! 现在 就 使 用 ) NS 
检 色 的 按钮 ， 它 们 在 淡 绿色 的 背景 上 显得 尤为 突出 。 
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dget Planner and Financial Planning | Mint-com fox 





(fe DR Wor Haoy Submis os tp SS aT 
EEC COC eC 





sonur Biocm 


Frinton FEATURES WHY USE MINT WAYS TO SAVE BLOG ABOUT 
yee 
the best way to manage your money 


k ttt” MONEY MAGAZINE 


At-a-glance insights 

We download, categorize and graph all of your finances 
Rent 51,200 automatically every day, so you know where you're 

spending, without spending any effort 


Groceries 5400 


Auto $750 


Free! Get started here » 





UNDERSTAND ALL YOUR ACCOUNTS EASY FIND 24/7 FINANCIAL 
YOUR MONEY IN ONE PLACE BUDGETING TOOLS INSTANT SAVINGS PROTECTION 





How mint can help you live a richer life 


save for retirement pay off your debt pay your student loans 





Why our users love mint What the press is saying 





Just signed up for Mint and it completely knocked my socks off This 
de anina en raunherianisa haw Fern mu manau ance Our Top Pick eee mone» 



























































Mint.com 使 用 了 一 个 双 互 补 色 配 色 方 案 来 展示 它 的 软件 的 用 途 。 亮 橙色 的 按钮 
在 屏幕 上 显得 很 突出 ， 会 吸引 住 读 者 的 眼球 。 




































































当 表 单 出 错时 ， 这 个 网 站 还 通过 使 用 色彩 来 快速 地 给 出 反馈 。 它 的 创建 者 选 
了 红色 ， 这 个 常用 来 提示 危险 的 颜色 ， 这 个 色调 在 淡 绿色 的 背景 下 显得 非 
常 突出 ， 很 难 被 忽视 。 
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色彩 能 使 用 户 注 意 力 集中 并 哄 专注 地 使 用 网 站 。 伴 随 常生 活 
时 时 存在 的 各 种 噪音 和 干扰 ， 让 用 户 专注 地 使 用 你 设计 的 网 站 简 

种 非 分 之 想 。 你 应 该 用 色彩 把 他 们 拉 回 到 你 的 设计 和 内 容 中 去 

可 以 使 用 色彩 将 他 们 的 注意 力 吸 引 到 你 的 网 站 最 重要 的 部 分 






















































































jang 
































的 色彩 ， 
jc 的 服 jo 





UI Tuneu 快速 地 解释 了 它 的 服务 ， 并 指示 你 在 哪里 可 
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Put your email 
on autopilot 


Dthorinbox helps koops you organized. 
automatically and moves the email clogging 
your inbox out of the way until you're ready 
to look at I 


Find out 
oreut to tho chasa and 
to soo for yoursolt, 


Who needs Otherlnbox? 


Anyone who can't keep up with thelr omall. 


‘Otherinbox is great tor people who shop online, 
Interact with frends on social networking sites, 
‘subscribe to malling lite and newsletters, try new 
‘software and websites, and more. I's even perfect for 
recruiters isting job openings or reabestate agents. 
with properties for sale. 


Other Koy Features 
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M Tuneup info@uituneup.com — (206) 324 - 2697 


Smat, low-cost re-design 
in less than a week. 


We'll simplity your most complex webpage, and make your sito Get Started » 


elegant and easier to use. Your users will thank you. 
















































































Simple. Affordable. Quick. 

Wo make subtle, but high-impact. An efficient procese and tight Overambitous re-designs can take 

improvements that reduce user scope. You'll never have to worry months, oven yoars to complote. Our 

frustration, and help your site about the project getting out of practical, tightly-scoped projects. 

work smoothly. hand or over budget. take a week or less. 

How it Works... | 

站 

= S225 
eps ese - A Aw c5 EH SVs 上 > 55 
通过 使 用 亮度 较 高 的 互补 色 ，UITuneup 使 用 户 很 容易 获悉 网 站 的 功能 ， 以 及 如 
s as e 

何 开始 使 用 这 些 功 能 。 











































































































即使 你 的 网 站 使 用 了 很 多 颜色 ， 你 也 可 以 把 用 户 的 注意 力 吸 引 到 某 个 元 素 上 
去 ， 你 可 以 通过 给 这 个 元 素 一 个 与 众 不 同 的 颜色 做 到 这 一 点 。Otherlnbox 使 
绿色 突出 网 站 的 焦点 “Test drive ”按钮 。 






































































































































可 能 发 生 的 最 糟糕 的 事情 是 新 用 户 无 法 理解 网 站 的 导航 ， 并 在 感到 迷惑 后 离 
开 。 色彩 可 以 帮助 他 们 从 正确 的 地 方 开始 ， 通 过 对 比 两 个 网 站 你 就 会 发 现 这 
一 点 ， 它 们 基本 使 用 了 相同 的 互补 色 配 色 方案 和 相似 的 设计 ， 但 是 却 产 生 
完全 不 同 的 效果 。 
Sonze 使 用 了 淡 蓝 色 和 深 红色 的 按钮 。 但 是 由 于 使 用 的 蓝 色 太 淡 了 ， 如 果 
发 现 按钮 上 有 字 的 话 ， 则 需要 很 费力 才能 看 清 它 写 了 些 什么 。 同 样 ， 可 

色彩 ， 所 以 即使 你 发 现 了 刚才 说 到 的 按钮 ， 


定 会 找到 其 他 可 以 点 击 的 东西 。 
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AutoFlnanciering.nl 正好 相反 , 它 几 乎 通过 深 红色 , 突出 了 个 可 以 点 击 的 项 目 。 
寻 为 背景 较 淡 ， 用 户 很 容易 发 现 这 些 按钮 。 
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BION 


SONZE AUTO FINANCIERING 






































这 两 个 网 站 使 用 了 相似 的 配色 方案 ， 但 是 却 产 生 了 相当 不 同 的 效果 。 

















SONZE 











与 AutoFlnanciering.nl 相 比 Sonze 的 按钮 很 难 被 发 现 ， 同 时 它 可 以 点 击 的 元 素 
使 用 了 不 太 连 贯 的 色彩 。 
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Let op! Geld lenen kost geld Ñ 















































AutoFlnanciering.nl 使 用 了 连贯 的 色调 ， 在 不 同 元 素 间 使 用 了 不 同 的 饱和 度 和 亮 
度 ， 这 使 用 户 可 以 很 容易 地 使 用 网 站 。 
















































































































































































对 于 一 个 包含 大 量 内 容 的 网 站 ， 内 容 的 颜色 持续 变化 的 地 方 ， 使 用 中 性 的 或 
着 重 突出 的 背景 色 有 时 是 最 好 的 选择 。 这 样 内 容 会 在 屏幕 上 凸现 出 来 ， 不 会 









































































































































和 背景 混 为 一 体 。 很 多 摄影 师 在 他 们 的 作品 展示 网 站 中 使 用 这 种 技术 来 突出 


LI 





























片 。 Hulu， 一 个 流行 的 视频 网 站 ， 采 用 了 突出 配色 方案 ， 我 们 自己 的 网 站 
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COLOURlovers， 用 来 创建 并 分 享 调 色 板 的 网 站 ， 也 是 用 了 这 种 配色 方案 。 








































































































了 很 少 的 颜色 ， 以 防止 它们 和 内 容 冲突 。 



































COLOURIovers, we love you! 









































在 coLOURIovers 中 ， 我 们 使 用 红色 突出 网 站 最 重要 的 部 分 一 一 社区 部 分 。 


5.4 色彩 与 体验 


知 虑 网 站 所 用 色彩 的 文化 内 涵 Ee 很 重要 的 ， 尤其 是 如 果 你 希望 网 站 能 带 来 国 
际 流 量 。 比如 绿色 ， 它 E T 常 3 的 颜 D, TL 日 方 上 册 界 常常 跟 环境 意识 X 
4 
































































































































































































































在 中 国 “ 绿 帽子 ”用 来 指 妻子 不 忠 ; 在 伊斯兰 世界 ， 这 种 颜色 是 神圣 的 ， 
天 主教 中 它 也 有 自己 的 含义 ;在 非洲 一 些 国家 中 绿色 代表 富饶 的 物产 。 它 也 
和 金钱、 嫉妒、 生长 、 生 病 、 没 有 经 验 、 那 恶 、 肥 沃 、 希 望 、 青 春 和 死亡 相关 。 
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ac 


调 色 板 中 的 青色 不 适合 任何 一 种 刚才 讨论 过 的 原则 ， 但 是 7 
ae; 生 非 常 美丽 的 效果 。 
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这 张 取 自 Paulo Brandao 作品 集 的 落日 照片 ， 向 我 们 展示 了 大 自然 是 如 何 使 用 色 



















































































色彩 也 会 影响 人 们 的 情绪 和 心理 。 在 精神 病院 的 墙 上 涂 上 一 点 浅 绿色 可 以 起 
到 镇 定 的 效果 。 吃 绿色 盘子 里 的 食物 会 使 人 产生 苦 的 味道 ;然而 蓝 色 的 盘子 
可 能 限制 你 的 食欲 ;粉色 的 盘子 会 使 你 觉得 食物 更 甜 。 






































































































































































































































这 个 取 自 离子 球 的 调 色 板 本 身 让 人 感到 不 安 。 但 是 通过 艺术 家 之 
m4 ， 比 如 离子 球 ， 它 可 能 变 成 一 个 美丽 瑰 奇 的 色 系 。 





把 它 放 到 背 















































1 http://www.flickr.com/photos/paulobrandao/2592581334/, 


2 Maeyama, M. Apr 2001 The Color of Yummy, Parenting Volume 15 Issue 3。 
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离子 球 是 尼 古 拉 - 特 斯 拉 (Nikola Tesla) 的 一 项 惊人 发 明 。 它 的 颜色 仅仅 通过 激 
发 球 内 气体 的 带电 粒子 产生 。 
色 盘 中 所 有 的 颜色 都 ,的 解读 、 民 间 传说 和 象征 意义 。 所 以 ， 实 际 上 3 
没有 选择 颜色 的 法 则 或 秘方 。 在 选 色 时 ， 你 还 得 依赖 你 自己 的 判断 ， 什 么 颜 
色 看 起 来 好 一 些 ， 什 么 颜色 更 适合 你 的 项 目 。 不 要 情 惧 ， 坐 下 了 
最 能 打动 你 的 心 ， 而 不 是 你 的 眼球 。” 


55 “灵感 


“优秀 的 艺术 家 复制 卓越 的 艺术 家 偷窃 。 一 一 帕 布 罗 - 毕加索 


色彩 在 自然 、 科 学 和 人 类 所 创造 的 东 ,处 不 在 。 要 想 获 得 灵感 ， 四 处 
看 就 行 。 很 可 能 在 边 就 有 一 张 图 片 、 一 个 生 锈 的 汽车 挡 泥 板 、 一 条 花 
和 一 只 猫 , 它们 可 能 包含 了 有 趣 的 色彩 组 合 。 从 你 所 发 现 的 东西 中 提取 色彩 ， 
MEL P E 惊讶 。 
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这 个 来 自 糖果 的 调 色 板 会 使 你 的 网 站 秀色 可 餐 。 


1 http://www.flickr.com/photos/jurvetson/167197691/. 





























网 站 设计 、 可 用 性 和 用 户 体验 中 超 炫 色彩 终极 使 用 指南 


















































我 们 几乎 在 所 有 的 东西 中 都 可 以 发 现 美丽 的 
正确 的 比例 展示 色彩 是 接 下 来 的 挑战 。 在 这 3 


点 突出 ， 情 况 将 会 大 不 一 样 。 





2H 























色 板 。 一 旦 你 选 定 一 个 调 色 板 ， 按 
绿色 代替 粉色 被 重 
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我 们 希望 这 一 章 有 助 于 你 理解 色彩 学 理论 的 核心 概念 和 一 些 可 以 帮助 你 谈论 
色彩 的 术语 ， 并 给 你 一 些 去 哪里 为 下 一 个 具有 创意 的 项 目 寻找 灵感 的 主意 。 
这 些 信息 将 帮助 你 的 设计 增加 一 些 结构 ， 并 通过 使 用 色彩 影响 或 提高 用 
验 或 产生 共鸣 。 但 是 我 们 最 希望 你 使 用 色彩 时 能 够 获得 灵感 。 关 于 色彩 的 使 
3 有 很 多 规则 ， 但 是 这 些 规则 也 等 待 着 有 人 去 突破 ， 人 们 应 该 遵循 内 心 的 感 
觉 和 灵感 。 数 字 技术 使 人 们 在 与 他 人 分 享 激情 时 产生 了 一 点 距离 ， 当 你 有 这 
个 广大 的 、 多 样 化 的 市 场 时 , 这 里 有 太 广 阔 的 空间 充分 展现 每 个 人 的 创造 力 ， 
时 自己 与 众 不同 并 创造 一 些 美丽 的 东西 。 祝 你 们 能 够 顺利 地 使 用 色彩 并 找到 
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最 初 , 这 张 关于 一 个 围栏 的 照片 看 不 出 什么 配色 方案 , 但 是 当 你 开始 抽取 颜色 时 ， 
一 个 不 错 的 调 色 板 出 现 了 。 昌 然 ， 它 们 可 能 看 上 去 有 点 不 协调 ， 但 是 当 把 色调 
降下 来 后 ， 这 些 纯色 色调 放 在 一 起 看 上 去 很 不 错 。 


1 http://www.flickr.com/photos/yomi955/783099682/。 
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侵蚀 是 大 











丽 调 1 





色 板 的 另 一 种 技巧 。 
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Id VRS SIRI VASES A. MRR AR, feet 
下 会 愿意 购买 商品 或 者 为 你 的 进步 充分 "陪练 ”你 会 失去 赚钱 的 机 会 。 因 此 ， 
你 需要 重点 优化 你 的 网 站 ， 以 提供 更 好 的 用 户 体验 。 


Yahoo 的 Firefox 插件 YSlow 提供 了 如 何 提高 网 站 响应 的 提示 。 本 章 不 仅 会 介 
A YSlow 的 这 些 技巧 ， 同 时 也 会 深入 讲解 MySQL 和 PHP 的 优化 技术 。 现 在 
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台 吧 | 





6. 








1 你 将 会 用 到 的 工具 
文本 编辑 顺 的 选择 。 
配置 好 的 LAMP 服务 器 (Linux, Apache 或 者 Lighttpd、Mysql、PHP5 )。 


FTP 账号 。FTP 是 向 服务 器 中 上 传 文件 的 通用 方法 。 因 为 这 篇 文章 是 
面向 具备 一 定 经 验 的 设计 师 和 开发 人 员 ， 我 们 假设 您 已 经 知道 如 何 通 
过 FTP 访问 你 的 文件 。 


SSH 账号 。 为 了 修改 远程 Linux 服务 器 的 配置 文件 ， 你 需要 可 以 访问 的 
SSH 账号 ， 可 选 的 客户 端 有 Putty 或 者 Jellyfish。 我 们 假设 您 已 经 知道 如 
何 使 用 SSH 客户 端 进行 登录 。 你 的 网 站 需要 开放 SSH 登录 ， 这 样 才能 获 
得 Web 服务 器 配置 文件 的 修改 权限 。 在 很 多 共享 主机 上 ， 往 往 没 有 这 
个 权限 。 

MySQL 初级 调试 工具 : 有 下 列 情 况 之 一 的 ， 你 可 以 跳 过 本 节 。 你 没 
有 访问 MySQL 配置 文件 的 权限 、 你 的 服务 器 不 是 Linux、 你 的 数据 库 
不 是 MySQL。 否 则 ， 请 登录 http://launchpad.net/mysgl-tuning-primer/ 
下 载 最 新 的 MySQL 调试 脚本 。 使 用 FTP 或 者 SSH 将 脚本 上 传 到 服务 器 
中 ， 但 是 先 不 要 运行 。 
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6.2 在 IMG 标签 中 表明 正确 的 图 片 尺 十 众 妙 之 门 











。 安 装 Smush: 这 是 一 个 Firefox 插件 ,提供 了 大 量 图 片 优 化 的 快捷 方式 ， 
它 是 一 个 顺手 的 工具 。 登 录 http://smush.it/， 下 载 安装 。Firefox 的 
NoScript 插件 也 许 会 与 它 发 生 冲 突 ， 因 此 你 需要 禁用 它 〈 译 者 注 : H 
前 Smush 被 包含 在 了 YSlow 中 ,已 经 不 需要 再 单独 下 载 安装 了 )。 

。 安 装 Firebug 和 YSlow 插件 : Yahoo 提供 了 一 个 Firebug 插件 YSlow, 
提供 了 快速 分 析 网 站 的 功能 ， 并 且 提 供 了 非常 实用 的 优化 网 站 相应 速 
度 的 建议 。 当 然 ， 我们 不 会 只 是 针对 Yslow 的 推荐 进行 优化 ， 但 是 你 























。 下 载 安装 Firefox : http://www.mozilla.org。 

。 运行 Firefox 并 安装 Firebug : http://www.getfirebug.com. 

。 安装 YSlow: https://addons.mozilla.org/firefox/addon/5369。 

。 马 上 开始 分 析 你 的 网 站 吧 ， 下 面 是 具体 的 步 又。 重启 Firefox 并 打开 你 
的 网 站 ， 和 选择“ 工具 >Firebug>Open Firebug”， 然 后 打开 “Yslow” 标 
签 点 击 “pPerformance”。YSlow 会 分 析 你 的 网 站 并 且 给 出 一 个 表现 等 级 。 
接 下 来 看 看 如 何 提高 网 站 的 得 分 等 级 。 


6.2 在 IMG 标签 中 表明 正确 的 图 片 尺寸 


如 果 有 一 个 2592 x 1944 像素 的 图 片 ， 你 希望 显示 为 120x90 像素 ， 那 么 不 
要 计 浏 览 器 对 图 片 进 行 缩放 。 








































































































«img src="img _ 2592x1944.png" width-"120" height="90" alt- "Bad" 
/> 
传输 图 片 文件 会 消耗 很 多 时 间 。 另 外 ， 由 于 浏览 器 需要 自己 将 图 片 缩小 ， 
这 也 会 消耗 一 定 的 时 间 而 且 效果 不 会 太 好 。 所 以 将 图 片 处 理 好 之 后 再 部 
到 服务 器 上 ， 有 很 多 的 免费 工具 可 以 进行 图 片 的 处 理 ， 例 如 GIMP 和 Paint. 
NET, 



















































































































































































































































































好 处 : 处 理 过 的 图 片 更 易于 传输 ， 速 度 更 快 ， 提 供 了 更 好 的 用 户 体验 。 
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6.3 ” 减 小 图 像 的 尺寸 


应 当 注 意 网 站 中 每 个 图 片 的 尺寸 ， 检 查 是 否 可 以 将 图 片 的 调 色 板 设置 为 
256 色 或 者 更 少 。 当 然 ， 这 也 取决 于 图 像 和 文件 格式 。 网 站 中 有 照片 、 线 
和 屏幕 截图 等 ， 每 种 类 型 都 需要 认真 处 理 。 这 是 一 项 乏味 得 几乎 没 人 想 





























































































































































































































































































































































































































下 面 提供 一 个 快捷 的 方法 : 打开 Firefox 并 访问 你 的 网 站 。 在 浏览 器 的 右 下 
角 ， 可 以 看 到 Smush.IT 的 图 标 。 单 击 它 就 会 出 现 一 个 新 的 浏览 器 窗口 。 这 
个 Web 服务 会 获取 网 站 的 所 有 图 片 ， 然 后 进行 压缩 。 下 载 经 过 优化 的 打包 
ZIP 文件 替换 服务 器 中 的 文件 。 同 样 ， 在 其 他 片 的 页 面 中 进行 相应 的 







































































处 理 。 








好 处 : 网 站 中 的 图 片 越 小 ， 加 载 时间 越 短 ， 用 户 体 验 越 好 。 

图 片 聚 合 

恨 设 你 有 一 个 论坛 。 论 坛 中 的 人 们 喜欢 使 用 表情 OS 
标 来 表示 自己 的 感情 。 因 为 表情 图 标 很 多 , m CO 

就 需要 很 多 不 同 的 图 片 文件 ， 这 增加 了 每 个 页 面 V? te 
的 HTTP 请 求 数 。 大 量 的 文件 下 载 大 大 地 降低 了 
站 的 加 载 时 间 。 
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想象 一 个 48x16 像素 的 图 片 平均 分 成 3 列 , Sov 

一 列 都 是 16X16 像素 的 表情 图 标 : 一 个 是 悲伤 p 

的 表情 ， 一 个 是 高 兴 的 表情 ， 一 个 是 生气 的 表情 ， 

等 等 。 这 种 单独 文件 包含 了 3 张 图 片 的 方式 就 是 。 太 友 克 克 克 克 克 砍 克 克 


















































Jolooookocoox 

上 聚合 。 使 用 CSS AY “background-image” 41 tekk kw o 
“background-position ”属性 就 可 以 确定 想 要 显示 okeseseicis 
的 图 片 。 例 如 ， 在 页 面 上 只 显示 高 兴 的 表情 。 这 样 ， 我 们 可 以 将 所 有 的 表情 
都 放 到 一 个 单独 的 文件 中 ， 极 大 地 减少 了 HTTP 的 请 求 次 数 和 时 间 。 自 然 ， 
片 聚 合 得 越 多 ， 你 的 受益 也 就 越 大 。 


这 项 技术 最 早 源 于 计算 机 游戏 行业 ， 适 用 于 一 些 不 经 常 更 新 的 图 片 ， 例 如 笑 
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E HA, BRRR ARRES o 

我 们 不 推荐 在 菜单 图 片上 使 用 这 种 技术 ， 片 可 能 时 不 时 地 发 生变 化 ， 
因此 每 次 你 必须 小 心地 进行 修改 ， 否 则 很 容易 出 错 。 仔 细 的 看 看 Smashing 
Magazine 上 关于 这 个 话题 的 讨论 吧 。 
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好 处 : 减少 HTTP 的 请 求 数目 降低 了 网 站 的 加 载 时 间 ， 提 升 了 用 户 体验 。 


64 ”服务 器 和 内 容 分 发 网 络 


YSlow 建议 将 静态 内 容 ， 诸 如 图 片 放 在 世界 各 
地 的 服务 器 上 ， 这 样 图 片 的 存储 就 更 接近 用 

0 果 能 够 承担 服务 器 的 租用 费用 ， 那 么 就 
请 按照 这 个 建议 做 。 但 是 对 大 多 数 用 户 来 说 ， 
巨额 的 费用 常常 让 这 个 选项 不 太 现实 。 如 果 可 
能 的 话 ， 租 用 一 全 专门 的 服务 器 ， 作 为 一 合 廉 
价 的 静态 内 容 专 用 服务 器 。 Google YouTube 上 的 图 片 聚合 。 


































































































































































































































































































好 处 : 合理 使 用 缓存 能 够 降低 贷款 费用 ， 提 高 用 户 体验 。 


6.5 合并 CSS 和 JavaScript 


通过 将 所 有 样式 文件 放 入 一 个 大 的 样式 文件 ， 将 所 有 JavaScript 文件 放 入 一 
个 JavaScript 文件 ， 可 以 减少 用 户 访问 网 页 时 的 HTTP 请 求 数 量 。 当 然 

发 过 程 中 可 以 继续 使 用 多 样式 和 多 JavaScript 文件 的 方法 。 但 是 每 个 
期 中 都 需要 进行 一 次 文件 的 整合 。 
可 以 通过 文本 编辑 器 进行 手工 的 整合 。 或 者 ， 如 果 你 使 用 Linux, TE CSS x. 


牛 夹 中 ， 可 以 使 用 Cat ( concatenate 的 缩写 ) 命令 整合 文件 。 
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cd your_css_directory 





cat filel.css file2.css file3.css > file_to_link.css 








还 有 JavaScript 文件 。 














1 http://www.smashingmagazine.com/?p=6319. 
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cd your javascript directory 


cat filel.js file2.js file3.js » file to link.js 


好 处 :减少 HTTP 请 求 数量 可 以 提高 网 站 的 响应 时 间 ,同时 带 来 用 户 体验 的 提高 。 
因为 文件 中 存在 覆盖 的 问题 (css 中 的 属性 重 写 或 者 JavaScript 中 的 代码 依 
赖 )， 在 整合 过 程 中 需要 特别 注意 JavaScript 文件 和 Css 文件 的 加 载 顺序 ( 你 
也 许 会 想 将 多 余 的 css 注释 删 掉 )。 如 果 你 决定 将 文件 进行 整合 ， 确 保 在 不 
同文 件 之 间 使 用 注释 进行 分 割 ， 如 下 所 示 。 































































































































































































/* Menu Styles */ 


(place menu styles here) 





/* Header Styles */ 





(place menu styles here) 


66 CSS 放 在 顶部 ， 而 JavaScript 放 在 底部 


正如 YSlow 建议 的 那样 ， 将 CSS 文件 放 在 HTML 文件 的 «head»«/head» 标签 
之 间 。 这 样 ， 浏 览 器 在 得 到 HTML 元 素 之 前 就 知道 该 如 何 进 行 显示 ， 而 不 必 
在 加 载 的 过 程 中 对 元 素 进 行 重新 调整 。 


将 JavaScript 文件 放 在 «body» 结束 标签 之 前 。 这 样 可 以 避免 JavaScript 对 正 
在 加 载 中 的 页 面 进行 泻 染 。 


































































































































































































好 处 : 尽 可 能 加 快 页 面 的 加 载 速度 ， 提 升 用 户 体验 。 


6.7 压缩 CSS 和 JavaScript 


首先 ， 很 多 基于 正则 的 JavaScript 压缩 器 在 遇 到 有 问题 的 代码 时 非常 不 稳定 。 
为 了 节省 时 间 ， 最 好 先 使 用 JSLint 检测 一 遍 代码 ， 将 找 出 的 问题 分 类 。 即 便 
代码 通过 了 JSLint 的 检测 ,也 应 当 尽 力 保证 代码 接近 完美 。 因 为 在 很 多 情况 下 ， 
一 个 分 号 都 会 导致 压缩 器 的 失败 。 










































































































































































1 http:/www.jslint.como 
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a FE, STA Packer 3.1 和 Minify 
Ed; "Hit Me”， 并 将 结果 应 用 在 你 的 网 
FEF。 压缩 的 代码 越 多 ， 网 站 的 表现 就 
越 好 。 对 于 JavaScript 来 说 ， 效 果 特 
明显， 而 css 则 小 不 了 太 多 。 当 然 ， 
他 的 CSS BY JavaScript 压缩 工具 也 六 
能 提供 一 个 更 好 的 压缩 比率 ， 你 也 可 以 
进行 尝试 。 
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f| 40, YUICompressor 是 一 款 集 安全 、 





























1 
车 文本 编辑 器 中 复制 你 的 CSS BK JavaScript 代码 ， 然 后 粘贴 到 Minify 7 


众 妙 之 门 






































在 代码 压缩 方面 有 着 非常 好 的 



































表现 。 























可 靠 和 压缩 比率 于 一 体 的 工具 。 如 果 正 在 使 用 其 他 类 型 的 中 间 件 ， 你 也 许 

















































































































Java 程序 ，YUICompressor 可 以 整合 在 任何 地 方 。 


希望 整合 YUICompressor 来 实现 对 CSS Fl JavaScript 的 自动 处 理 。 作 为 一 个 


好 处 : 减 小 了 文件 尺寸 ， 降 低 了 带宽 消耗 ，JavaScript 的 表现 得 到 了 显著 地 


提升 ,改善 了 用 户 体验 。 


6.8 使 用 外 部 CSS 和 JavaScript 文件 




















不 要 使 用 内 联 的 CSS 或 者 Javascript， 把 它们 都 放 在 外 部 单独 的 文件 中 。 这 
样 不仅 易 于 理解 ( 需要 进行 修改 的 时 候 ， 你 知道 去 修改 哪个 对 应 的 文件 )， 
























































而 且 也 减少 了 需要 缓存 的 HTML 文件 的 
































尺寸 ， 提 高 了 缓存 的 儿 


= 


用 率 ( 























在 一 个 JavaScript 或 CSS 文件 被 多 个 页 









































的 请 求 数 。 














例如 ， 


可 使 用 的 时 候 )， 同 样 也 降低 了 HTTP 


好 处 : 改善 了 缓存 利用 率 ， 页 面 重新 加 载 时 间 变 得 更 短 ， 提 升 了 用 户 体验 。 


6.9 选择 一 个 文档 类 型 























bee 

















选择 文档 类 型 虽然 对 于 改善 速度 没什么 ] 














直接 影响 ， 但 是 通过 为 浏览 器 # 





























2 http://www.reneschmidt.de/tools/minify/. 
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晰 、 明 确 的 HTML 和 CSS 解析 规则 ， 可 以 充分 发 挥 它们 的 潜力 。 


你 在 考虑 在 网 站 中 使 用 HTML 还 是 XHTML 标准 ? HTML4.0 是 一 个 很 好 的 选 
择 ， 尽 管 仍 有 不 少 的 站 长 乐于 选择 XHTML1.0。 不 要 在 任何 地 方 漏 掉 文 档 类 
型 的 声明 ， 这 样 会 导致 浏览 器 去 猜测 应 该 使 用 什么 标准 。 相 反 ， 在 HTML 的 


— a. say Me 开 | 
第 行 就 声明 文 当 类 型 。 

















































































































































































































下 面 是 XHTML1.0 Trasitional 的 例子 。 





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 





Transitional//EN" "http://www.w3.org/TR/xhtmli/DTD/ 





xhtmll1-transitional.dtd"- 


下 面 是 HTML4.01 Transitional 的 例子 。 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 








Transitional//EN" "http://www.w3.org/TR/html4/ 





loose.dtd'"- 


好 处 : 告诉 浏览 器 处 理 网 站 的 方式 ， 是 非常 重要 的 步 又， 确保 了 在 不 同 浏览 
器 中 网 站 外 观 的 一 致 性 。 


6.10 ”验证 页 面 


特别 是 在 你 提供 基于 网 络 的 服务 时 ， 潜 在 用 户 会 仔细 分 析 你 的 网 
你 对 于 质量 的 关注 究竟 到 何 种 程度 。 通 过 W3C 的 验证 服务 页 面 表明 你 对 
质量 非常 关注 ， 而 且 致力 于 设计 在 普通 网 络 浏览 器 上 表现 一 致 的 页 面 。 经 
验证 的 页 面 是 否 代 表 了 网 站 的 服务 质量 是 另外 一 回 事 儿 ， 但 是 如 果 潜 在 
在 你 的 网 站 上 验证 失败 ， 他 就 会 对 你 失去 信任 。 
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6.11 不 要 使 用 CSS RIAN 


支持 CSS 表达 式 的 浏览 器 允许 你 将 逻辑 放 在 CSS 的 声明 中 。 这 种 做 法 既 不 被 


















































1 http://validator.w3.orgo 
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网 页 标准 所 接受 ( 因此 很 多 浏览 器 并 不 支持 这 个 特性 )， 也 不 是 一 个 好 习惯 ， 
它 违背 了 CSS 将 程序 逻辑 和 内 容 表 现 分 开 的 初衷 。 例 如 ， 当 JavaScript 脚本 
或 窗口 缩放 触发 了 文档 中 对 象 的 移动 或 更 新 时 , 对 象 的 样式 也 需要 相应 更 新 。 
CSS 表达 式 要 比 普 通 的 CSS 花费 更 多 的 步骤， 处 理 速 度 明 显 地 降低 了 ， 这 是 
一 种 资源 的 浪费 。 千 万 不 要 使 用 css 表达 式 ， 它 们 一 无 是 处 。 它 们 从 来 没 
被 网 页 设计 社区 所 接受 ， 即 便 是 它 的 “创造 者 ”微软 , 也 在 1E8 中 抛弃 了 它 。 


6.12 服务 器 部 分 


接 下 来 是 一 些 较为 专业 的 内 容 。 你 应 该 已 经 拥有 了 服务 器 的 root 权限 。 
许 因为 使 用 了 共享 主机 , 你 无 法 获得 这 样 的 权限 , 但 这 部 分 仍然 会 对 你 o 
你 可 以 检查 自己 的 主机 是 否 满足 需求 ， 如 果 不 能 满足 ， 也 知道 该 如 何 去 提 出 
尔 的 需求 。 

为 了 掌握 这 些 信 息 ， 你 也 许 需 要 时 不 时 地 服务 器 文档 。 


配置 Web 服务 器 需要 一 些 服 务 器 的 底层 进入 权限 ， 通 常 是 通过 SSH 的 方式 。 
你 应 当 具 有 一 些 SSH 的 基本 常识 ， 例 如 如 何 登录 、 如 何 作为 root 用 户 修改 
配置 文件 以 及 如 何 重 启 服务 等 。 每 种 服务 器 软件 都 不 一 样 ， 所 以 本 节 不 可 
EE 介绍 所 有 的 具体 操作 细节 。 使 用 Debian GNU. Linux, Windows. Red Hat 
GUN/Linux 等 不 同 的 环境 ， 具 体 的 步骤 是 不 相同 的 。 


本 节 中 使 用 标准 的 Debian GNU/Linux ( 代号 “Lenny”) 操作 系统 。 


6.13 Apache : 如 何 设置 过 期 时 间 


HTTP 标 头 中 的 “expires header” 属 性 决定 了 文件 多 长 时 间 应 当 进 行 刷新 。 
文件 被 缓存 后 ， 只 有 在 过 期 的 情况 下 浏览 器 才 会 重新 发 送 请 求 ， 这 样 就 减少 
了 HTTP 的 请 求 次 数 。 


我 们 开始 吧 。 首 先 通过 SSH 登录 服务 器 并 且 获 得 root 权限 。 
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ù 













































































































































































su 


如 果 你 想 安装 一 个 容易 使 用 的 文本 编辑 器 ， 在 命令 行 中 执行 下 面 命令 。 
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aptitude install nano 


继续 ， 打 开 Apache 的 过 期 模块 。 

















a2enmod expires 

























































































确保 .htaccess 文件 的 解析 功能 已 经 打开 。 编 辑 网 站 的 配置 文件 ， 配 置 文件 
名 变化 很 大 。 也 许 存 放 在 “/etc/apaches/sites-enables” 下 ， 假 设 文件 名 为 
“ooo-default” 并 且 使 用 “nano” 编 辑 器 进行 编辑 。 




































































nano /etc/apache2/sites-enabled/000-default 

如 果 “Allowoverride” 属 性 已 经 被 设置 为 “All"， 那 么 就 这 样 退出 ， 否 则 
J “AllowOverride none" X “AllowOverride All”, REREH, ARRE 
Apache 的 配置 文件 。 























































































































apache2ctl -t 
如 果 一 切 正 常 ， 那 么 重启 服务 并 退出 。 












































/etc/init.d/apache2 restart && exit 
切换 到 FTP 或 者 SCP 客户 端 ， 登 录 到 网 站 的 wwwroot 目录 并 创建 一 个 
“.htaccess” 文 件 。 注 意 前 面 的 点 ， 用 你 的 文本 编辑 器 打开 ， 并 且 输 入 下 列 


DR 
tro 
































































































































ExpiresActive On 


ExpiresDefault "access plus 1 year" 





ExpiresByType text/html "access plus 1 hour" 
这 个 设置 让 HTML 缓存 一 个 小 时 ， 其 他 的 内 容 缓 存 一 年 。 经 验 之 谈 : 让 静态 
文件 缓存 更 长 的 时 间 。 你 可 以 实验 为 不 同 的 内 容 设置 不 同 的 过 期 时 间 ， 例 如 


“text/javascript”, “application/javascript”, “text/css”, “image/gif”, "image/ 























































































































png” #0 “image/jpg” =o 
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6.14 YSlow 中 可 以 查看 缺少 expires header 的 报警 众 妙 之 门 








1. Make fewer HTTP requests 
2. Use a CDN P 
3. Add an Expires header 7 
These components do not have a far future Expires or 
cache-control: max-age header: 
P (no expires) http://www. reneschmidt.de:81/test.css 


P (no expires) http://www.reneschmidt.de:81/test.js 
P (no expires) http://www.reneschmidt.de:81/test.jpg 





4. Gzip components > 
5. Put CSS at the top 
6. Put JS at the bottom 
7. Avoid CSS expressions 
n/a 8. Make JS and CSS external > 


X Was cs X . 






































使 用 YSlow 检查 刚才 的 配置 是 否 生效 。 








Et 清除 浏览 器 的 缓存 。 


Mx 





























6.14 YSlow 中 可 以 查看 缺少 expires header 的 报警 


如 果 设 置 了 expires header， 即 使 你 更 新 了 CSS sk JavaScript 文件 ， 用 
问 的 可 能 仍然 是 旧 的 缓存 文件 。 在 地 址 中 加 入 版 本 参数 可 以 简单 地 消除 这 个 
问题 ， 如 下 所 示 。 
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«link rel-"stylesheet" type-"text/css" href-"style.css?v- 1.0" 
/> 
























































当然 ， 这 个 参数 并 不 会 被 接受 或 处 理 。 它 仅仅 是 给 浏览 器 的 一 个 指示 。 当 文 
件 更 新 的 时 候 ， 将 更 新 这 个 参数 ， 例 如 从 “v=1.0” 到 “v=1.1”"， 这 样 浏览 讲 
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就 会 取 回 更 新 后 的 内 容 。 

















6.15 Lighttpd: 如 何 设置 过 期 头 


Lighttpd 或 者 Lighty 并 不 读 取 .htaccess 文件 ， 所 以 我 们 必须 把 设置 写 在 它 的 
配置 文件 中 。 切 换 到 root 用 户 进入 /etc/lighttpd/conf-available。 


































































































SU 
cd /etc/lighttpd/conf-available 
创建 一 个 这 个 模块 的 配置 文件 。 


























nano ./01-expire.conf 


为 简单 起 见 ， 我 们 为 所 有 的 虚拟 主机 (vhosts) 设置 相同 的 过 期 头 。 把 下 面 






















































































的 内 容 放 入 新 创建 的 文件 中 。 

server.modules += ( "mod expire" ) 

SHTTP[ “url” ] =~ "" ( 

xpire.url = ( "" => “access 12 hours" ) } 

SHTTP["url"] =~ "(7zlrar|ziplgzlpd£lexelcss|jslpng|gif| 











jpglico)s" { 


( un 


expire.url = => "access 1 years" ) 































































































} 
这 样 静态 文件 的 过 期 时 间 被 设置 为 一 年 ， 其 他 访问 的 内 容 过 期 时 间 为 一 个 小 
时 。 保 存 文件 并 退出 ， 把 新 文件 与 当前 的 配置 文件 合并 ， 并 且 重 启 Lighty。 
























































lighttpd-enable-mod expire 


/etc/init.d/lighttpd force-reload 


6.16 Apache: 如 何 配置 ETags 


ETag ( 实体 标签 的 缩写 ，entity tag ) 是 HTTP 响应 头 ( response header ) 
3 来 判断 文件 内 容 是 否 被 修改 的 标志 。 当 HTTP 响应 中 包含 与 之 前 相同 的 
ETag 时 ， 请 求 的 内 容 被 认为 没有 修改 过 进而 返回 空 的 响应 体 。 
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GET /favicon.ico HTTP/1.1 
Host: www.reneschmidt.de 
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.8) Gecko/2009032... 国 
Accept: image/png,image/*;q=0.8,*/*;q=0.5 
Accept-Language: de-de,en;q=0.8,en-us;q=0.7,bn;q=0,5, br;q=0,3,bs;q=0.2 
Accept-Encoding: gzip,deflate 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 
Keep-Alive: 300 
Connection: keep-alive 
-eo VW DMA S aame mathe o em 
Ahen ca d cm 0o 9o meme eee s M o 


HTTP/1.x 200 OK 

Cache-Control: max-age=93312000 
Content-Type: image/x-icon 

Accept-Ranges: bytes 

Etag: "3862573478" 

Last-Modified: Wed, 11 Mar 2009 16:01:45 GMT 
Content-Length: 198 

Date: Tue, 21 Apr 2009 08:52:51 GMT 

Server: lighttpd/1.4.19 


| 


现在 Lighty 输出 了 过 期 时 间 。 




























































































在 Apache 中 ， 文 件 实体 标签 默认 为 “All”"。 表 示 文 件 的 ETag 是 由 Inode、 
Mtime 和 文件 尺寸 信息 生成 的 。 如 果 你 的 服务 器 不 支持 ETags， 可 以 手动 地 
启用 它 。 编 辑 网 站 中 的 .htaccess 文件 ,查找 “FileETag ” ,也许 会 找到 “FileETag 
None”， 修 改 如 下 所 示 。 







































































FileETag All 
保存 3 上 传 文 F, 然后 令 查 现在 Apache EOE T ETagso 如 果 不 支 持 ， 可 
能 是 因为 Apache 编译 的 时 候选 择 了 禁用 ETags。 那 么 可 以 换 用 另外 版 本 的 
Apache 或 者 请 求 主 机 提供 商 启用 这 个 特性 


Lo 













































































































































































Lee 




















6.17 Lighttpd: 如 何 配置 ETags 


Debian 中 的 Lighty 默认 开启 了 ETags, 所 以 基本 上 不 需要 操作 。 如 果 没 有 开局 ， 
可 以 通过 下 面 的 命令 打开 ， 切 换 到 root。 
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SU 
cd /etc/lighttpd/conf-available 
创建 新 的 配置 文件 。 











nano ./10-etags.conf 


将 下 面 的 代码 添加 到 文件 中 。 





static-file.etags = !"enable" 


保存 退出 。 加 载 新 的 配置 文件 ， 重 启 Lighty。 





















































lighttpd-enable-mod etags 





/etc/init.d/lighttpd force-reload 


6.18 为 PHP 安装 eAccelerator 


Debian 没有 预 置 的 eAccelerator 包 ， 所 以 需要 从 源码 进行 编译 。 假 设 服务 器 
中 已 经 安装 了 Debian Lenny 和 PHP5， 首 先 下 载 一 些 包 。 




































































aptitude install bzip2 php5-dev make 
切换 到 root， 从 eAccelerator 网 站 下 载 源 码 。 




















su 

cd /tmp 

wget http://bart.eaccelerator.net/source\ 
/0.9.5.3/eaccelerator-0.9.5.3.tar.bz2 

文中 使 用 的 版 本 为 0.9.5.3, 如 果 想 使 用 最 新 的 版 本 , 替换 相应 的 版 本 字符 有 
解压 源码 并 且 切 换 目录 。 


























UT 












































Tu 
o 






































tar xvjf eaccelerator-0.9.5.3.tar.bz2 
cd eaccelerator-0.9.5.3 
开始 源码 编译 。 


export PHP PREFIX-"/usr" 





$PHP PREFIX/bin/phpize 
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./configur nable-eaccelerator-shared \ 


TJ 


—with-php-config=$PHP_PREFIX/bin/php-config 





make && make install 


























eAccelerator 的 配置 文件 需要 手工 创建 。 

















nano /etc/php5/conf.d/ea.ini 


将 下 列 内 容 复 制 至 配置 文件 中 。 






































[eAccelerator] 





xtension-"eaccelerator.so" 
eaccelerator.shm_size="32" 
eaccelerator.cache_dir="/tmp" 
eaccelerator.enable="1" 
eaccelerator.optimizer="1" 
eaccelerator.check_mtime="1" 
eaccelerator.debug-"0" 
eaccelerator.filter="" 
eaccelerator.shm_max="0" 
eaccelerator.shm_tt1="0" 
eaccelerator.shm_prune_period="0" 
eaccelerator.shm_only="0" 


eaccelerator.compress="1" 





eaccelerator.compress_level="9" 


重启 服务 器 。 














/etc/init.d/lighttpd restart 


或 者 
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/etc/init.d/apache2 restart 


| Eile Edit View History Bookmarks Tools Help 
wee Q X A (/— [ntp//wewreneschmidt.de/inf.php > * 
Regi PHP  |zip, php, file, data, http, ftp, compress.bzip2, compress.zlib, https, ftps 




















|tcp, udp, unix, udg, ssl, sslv3, sslv2, tls. 


string.rot13, string.toupper, string.tolower, string.strip tags, convert", consumed, 
converticonv.*, bzip2.*, zlib.* 





This server is protected with the Suhosin Patch 0.9.6.2 
‘Copyright (c) 2006 Hardened-PHP Project 





This program makes use of the Zend Scripting Language Engine: 
nd Engine v2 2 N 308-2008 hnalagies 


eAccelerator v0.9.5.3, Copyright (c) 2004-2006 eAccelerator, by eAccelerator 


PHP Credits 


Configuration 


PHP Core 





n 


4* WB Ysow 0277 @ 
正确 安装 eAccelerator 后 ， 红 框 的 部 分 会 出 现 一 个 额外 的 版 权 信息 。 




































































检查 eAccelerator 是 否 编译 并 安装 成 功 。 切 换 到 FTP 或 者 SCP 客户 端 ， 进 入 
网 站 的 根 目录 ， 创 建 一 个 “inf.php” 文 件 ， 添 加 下 面 的 代码 。 










































































<?php phpinfo(); ?> 
保存 退出 并 上 传 文件 ， 在 浏览 器 中 访问 这 个 文件 。 












































http: //www.example.com/inf.php 
当然 ， 你 需要 将 www.example.com 蔡 换 为 实际 的 主机 名 。 别 忘 了 将 服务 器 


不 需要 的 包 删 除 。 














aptitude remove php5-dev make 
SSRN: 移 走 具有 公共 访问 权限 的 inf.php 文件 。 如 果 黑 客 能 够 访问 它 ， 
就 能 得 到 很 多 有 助 于 攻破 系统 的 有 用 信息 ， 任 何人 都 不 希望 遇 到 这 样 的 安全 


问题 。 


















































| 四 





fit 
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6.19 MySQLTuning Primer 


同样 ， 调 试 MySQL 也 需要 SSH 权限 。 还 需要 一 个 能 获得 MySQL 运行 信息 的 
账户 ( 例如 root ,但 是 同系 统 的 root 用 户 不 同 ) 和 一 个 运行 的 MySQL 服务 器 。 
登录 服务 器 并 且 下 载 MySQL Tuning Primers 




















































































































wget http://launchpad.net/mysql-tuning-primer/trunkN 
/1.5-r1/+download/tuning-primer.sh 


赋予 执行 权限 。 





chmod «x ./tuning-primer.sh 
另外 需要 解决 这 个 脚本 的 依赖 关系 ， 该 脚本 依赖 于 “bc” 一 个 很 小 的 命令 行 
计算 器 。 




















aptitude install bc 

运行 脚本 ， 按 照 提示 输入 MySQL 账号 信息 ， 脚 本 会 分 析 运 行 状态 信息 并 
A MySQL 的 配置 优化 提供 建议 。 仔 细 阅 读 提供 的 建议 ， 对 Mysal 的 配置 i 
行 相应 的 修改 。 

































































































































































nano /etc/mysql/my.conf 

例如 ， 如 果 Tuning Primer 提示 “你 的 query. cache size 太 高 ， 也 许 你 可 以 将 
资源 用 在 其 他 的 地 方 "， 那 么 根据 提示 修改 配置 文件 ， 查 找 “query_cache 
size" , 大 概 降低 10%。 一 次 不 要 修改 太 多 ， 保 持 在 10% ~ 20%。 保 存 退出 
局 MySQL, 

















































































































/etc/init.d/mysql restart 
建议 在 进行 下 一 次 调试 前 等 待 48 个 小 时 ,以 让 MySQL 收集 足够 多 有 用 的 信息 。 


6.20 ”启用 透明 压缩 


果 你 的 网 站 访 问 量 不 大 ， 7X ate th 些小 的 HTML、 C99 和 JavaScript Xt, 
压缩 文件 并 不 是 十 分 必要 。 因 为 即便 负载 高 到 严峻 的 程度 ， 即 时 的 压缩 会 给 
服务 器 带 来 额外 的 压力 。 
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但 是 如 果 你 有 大 量 的 资源 和 大 尺寸 文本 文件 ( 例如 HTML. CSS. JavaScript 
和 JSON )， 此 时 应 当 激 活 压缩 功能 ， 这 样 可 以 节省 带宽 、 减 少 传输 时 间 。 


















































6.20.1 启用 Apache 的 压缩 功能 
下 面 是 为 Apache 启用 压缩 的 方法 ， 切 换 到 root 用 户 ， 编 辑 deflate.conf。 



































ene 























su 
nano /etc/apache2/mods-available/deflate.conf 

默认 情况 下 ，Debian Lenny 中 Apache 的 mod defalte 模块 默认 对 “text/ 
html". “text/plain” #0 “text/eml “SCF HET R48. KIRA, HRA 
iB CSS. JavaScript 3} 4 JSON, ATOM 和 RSS 也 进行 压缩 ， 那 么 将 deflate. 
conf 修改 如 下 所 示 。 



































di 












































«IfModule mod deflate.c» 
AddOutputFilterByType DEFLATE text/html 
AddOutputFilterByType DEFLATE text/plain 
AddOutputFilterByType DEFLATE text/xml 


AddOutputFilterByType DEFLATE text/css 








AddOutputFilterByType DEFLATE text/javascript 
AddOutputFilterByType DEFLATE application/xhtml+xml 
AddOutputFilterByType DEFLATE application/javascript 
AddOutputFilterByType DEFLATE application/ 
x-javascript 
AddOutputFilterByType DEFLATE application/json 
AddOutputFilterByType DEFLATE text/json 
AddOutputFilterByType DEFLATE application/xml 
AddOutputFilterByType DEFLATE application/rss+xml 


AddOutputFilterByType DEFLATE application/rdf+xml 






































AddOutputFilterByType DEFLATE application/atom+xml 








# Netscape 4.x has some problems... 
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BrowserMatch ^Mozilla/4 gzip-only-text/html 


Netscape 4.06-4.08 have some more problems 





BrowserMatch “Mozilla/4\.0[678] no-gzip 








MSIE masquerades as Netscape, but it is fine 

















BrowserMatch \bMSIE !no-gzip !gzip-only-text/html 
«/IfModule» 
注释 行 在 官方 文档 中 已 经 被 去 掉 。 

于 浏览 器 不 请 求 或 接受 编码 为 图 片 的 内 容 ， 有 时 我 们 会 尝试 为 所 有 的 文件 
设置 压缩 。 但 是 这 么 做 的 话 ， 在 浏览 器 请 求 已 经 被 压缩 过 的 较 大 文件 时 会 发 
生 严 重 的 问题 ， 很 可 能 会 导致 类 似 DDos 的 情况 。 因 为 图 片 、 视 频 或 者 类 似 
类 型 的 文件 已 经 被 压缩 过 ， 所 以 我 们 无 需 再 压缩 这 些 文件 。 即 使 浏览 器 要 求 
压缩 这 些 内 容 ， 服 务 器 也 不 会 进行 压缩 。 

















































































































































































































































































































6.20.2 激活 Lighttpd 的 压缩 


Debian Lenny 中 的 Lightpd 默认 打开 了 压缩 的 选项 ， 所 以 不 需要 进行 手工 的 
设置 。 即 便 如 此 ， 最 好 知道 如 何 设置 ， 也 许 今后 会 派 上 用 场 。 


























s 





























































































































切换 到 root HA, A /etc/lighttpd/conf-available。 





su 





cd /etc/lighttpd/conf-available 
创建 新 的 配置 文件 。 

















nano ./05-compress.conf 


将 下 面 的 代码 加 入 新 的 配置 文件 中 。 























server.modules += ( "mod compress" ) 


保存 退出 后 整合 配置 文件 ， 重 启 Lighty。 





















































lighttpd-enable-mod compress 





/etc/init.d/lighttpd force-reload 
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6.20.3 打开 PHP 的 压缩 选项 











你 也 许 想 激活 压缩 输出 的 PHP 脚本 。 使 用 “su” 命 令 切 换 到 root 账号 ， 编 
辑 Mn X ft. php.ini 的 路 径 取决 于 使 用 的 服务 器 和 PHP 的 安装 方式 。 对 





















































于 Apache 和 mod php 而 言 ， 地 址 如 下 所 示 。 


nano /etc/php5/apache2/php.ini 





Date Wed, 22 Apr 2009 09:07:11 GMT 
Server Apache/2.2.11 (Debian) PHP/S.2.6-3 with Suhosin-Patch 
Last-Modified Tue, 21 Apr 2009 09:06:38 CMT 
Accept-Ranges bytes 
Cache-Control max-age-2592000 
Expires Fri, 22 May 2009 09:07:11 GMT 








Host www.reneschmidt.de:81 
User-Agent Mozilla/S.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.8) Gecko 
3.5.30729) 
Accept text/html, epplication/xhtml+xml, application/xml;q-0.9,*/*;q-0.8 
Accept-Language de-de,en;q-0.8,en-us;q-0.7,bn;q-0.5,br;q-0.3,bs;q-0.2 
iei] gzip,deflate 
ISO-8859-1,utf-8;q-0.7,*;q20.7 
ag AREE 300 
Connection keep-alive 


© GET test.jpg 200 OK reneschmidt.de:81 591KB Da hiems 


Date Wed, 22 Apr 2009 09:07:11 GMT 
Server Apache/2.2.11 (Debian) PHP/S.2.6-3 with Suhosin-Patch 
Last-Modified Tue, 21 Apr 2009 09:05:51 GMT 
aeuo Ranges bytes 
Content-Length 605015 
Cache-Control max-age=2592000 
Expires Fri, 22 May 2009 09:07:11 GMT 
Keep-Alive timeout=15, max-97 
Connection Keep-Alive 
Content-Type image/jpeg 


已 经 被 压缩 的 文件 不 能 被 再 次 压缩 。 






































以 FastCGI 方式 安装 的 Lighttpd， 配 置 如 下 所 示 。 

















nano /etc/php5/cgi/php.ini 












































在 配置 文件 中 查找 “zlib.output_compression” 打 


zlib.output compression = On 


保存 退出 并 重启 服务 器 。 
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6.22 ”如 何 探测 长 时 间 跳 转 链 ? 众 妙 之 门 





/etc/init.d/lighttpd restart 
或 者 
/etc/init.d/apache2 restart 


6.20.4 ”检查 压缩 效果 

重新 打开 Firebug， 切 换 到 Net 标签 ， 重新 加 载 你 的 网 站 。 现 在 HTML、 
JavaScript, CSS. XML, RSS, ATOM. JSON 和 普通 的 文本 内 容 应 当 默认 会 被 压缩 ， 
他 类 型 的 文件 则 不 会 被 压缩 。 


























































































































6.21 尽 可 能 避免 重 定向 


网 站 在 使 用 一 段 时 间 后 会 产生 很 多 重 定向 。 有 些 文件 因为 过 期 或 者 突然 消失 
而 被 移 走 了 ， 当 用 户 访问 这 些 文件 时 对 请 求 进行 重 定 向 是 一 个 很 好 的 办 法 ， 






























































































































































































































































这 样 可 以 帮助 用 户 找到 他 搜索 的 内 容 。 如 果 要 使 用 重 定向 ， 首 先 检查 重 定向 
E 否 已 经 存在 了 。 



















































































































































































在 这 个 例子 中 ， 请 求 文件 A， 接 着 请 求 被 重 定向 到 B， 然 后 重 定向 到 C, 
Hx iE [3] 8 Do 整个 过 程 Uu Ze 求 ， 只 有 两 次 求 满足 了 o 

































































好 处 : 如 果 能 够 仔细 的 优化 重 定向 链 ， 服 务 器 就 能 够 处 理 更 多 的 并 发 访问 。 


6.22 ”如 何 探测 长 时 间 跳 转 链 ? 


切换 到 Firefox, 打 开 Firebug, 点击 Net 标签 。 如 果 被 禁用 ,那么 选择 “Network 
monitoring” 并 且 应 用 设置 。 这 样 Firebug 会 重新 加 载 当 前 的 页 面 ， 列 出 
加 载 页 面 所 有 必要 的 请 求 。 
当 用 户 请 求 一 个 HTML 文件 的 时 候 ，Firebug 会 列 出 这 个 请 求 同 时 发 生 的 
所 有 请 求 以 及 请 求 的 状态 码 。302 表示 的 是 一 个 临时 的 重 定向 。 示 例 中 的 
服务 器 并 没有 进行 过 优化 ， 所 以 不 能 同 生 产 环 境 的 服务 器 进行 对 比 。 在 
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上 例 中 ， 四 个 请 求 耗费 了 180ms ( 毫秒 )。 如 果 页 面 的 请 求 导向 了 一 个 长 
时 间 的 跳 转 链 ， 响 应 时 间 就 会 超过 1s ( 秒 )。 你 应 该 让 用 户 直接 访问 实际 的 
地 址 ， 如 下 所 示 。 













































































Redirect /A.html http://www.example.com/D.html 


而 不 是 进行 间接 的 重 定 向 ( 在 .htaccess 中 设置 )， 如 下 所 示 。 
























































Redirect /A.html http://www.example.com/B.html 





Redirect /B.html http://www.example.com/C.html 














Redirect /C.html http://www.example.com/D.html 


短 的 重 定向 涟 处 理 起 来 比 长 链 快 得 多 。 本 例 中 ， 重 定向 消耗 了 105 微 秒 。 














































































































避免 不 必要 的 对 


6.23 ”完整 的 链接 


打开 永久 链接 功能 的 WordPress 会 自动 重 定向 到 一 个 不 带 结 尾 斜 线 的 链接 。 





wh 
il} 
at 


















































http://www.example.com/post -> http://www.example.com/post/ 
注意 结尾 的 斜 线 ， 这 产生 了 两 次 请 求 ， 次 没有 生效 。 那 么 ， 务 必 有 确保 
WordPress 的 永久 链接 带 着 结尾 的 斜 线 ， 这 样 可 以 减少 必要 的 请 求 数 。 换 句 
话说 ， 如 果 你 要 添加 内 部 的 链接 ， 确 保 这 些 链接 总 是 带 着 结尾 的 斜 线 ， 除 非 
是 链接 到 像 *.html 或 者 *.php 这 样 的 静态 


另外 ， 同 样 的 内 容 不 要 使 用 两 个 链接 。 和 确保 指向 http://www.example.com/ 
postname 的 请 求 确实 重 定向 到 http://www.example.com/postname ， 这 个 

































































































































































了 
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规则 不 是 为 了 性 能 的 目的 ， 而 是 为 了 优化 搜索 引擎 。 
排名 造成 影响 。 


6.24 ”避免 死 链 接 


请 注意 ， 如 果 请 求 了 一 个 不 存在 的 文件 ， 服 务 器 必须 发 送 一 个 404 信息 明确 
地 告诉 用 户 请 求 的 文件 找 不 到 了 。 作 为 站 长 ， 你 应 该 确保 没有 链接 到 不 存 
的 HTML, CSS 和 JavaScript 文件 。 很 多 服务 器 在 单独 的 文件 
众多 的 404 请 求 会 不 断 增 加 日 志文 件 的 大 小 ， 而 且 增 加 了 服务 器 的 资源 消 厅 
( 例如 CPU 和 磁盘 空间 )。 


如 何 检查 内 部 的 死 链 接 ? 


检查 内 部 的 死 链 接 就 像 是 在 公园 中 的 漫步 。 假 设 网 站 中 有 一 个 几乎 全 白 
9 背景 图 “background.png"， 通 过 “background-image” 属 性 赋 给 了 
body 标签 。 


为 相同 的 内 容 会 对 
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body { background-image: url("background.png"); ) 

假设 这 个 文件 不 在 了 ， 仅 仅 浏览 网 页 ， 你 还 无 法 发 现 这 个 问题 。 浏 览 器 也 
不 会 明确 地 报告 通过 Css 文件 加 载 文件 的 问题 。 现 在 打开 Firefox 并 且 清 除 
浏览 器 的 缓存 。 打 开 Firebug， 重 新 加 载 当前 的 页 面 。Firebug 会 列 出 所 有 的 
请 求 ， 包 括 css 文件 中 包含 的 文件 。 
































































































































































































































200 OK reneschmidt.de:81 — 2KB BY 6ams 
200 OK reneschmidt.de:81 591KB 
404NotFound ^ reneschmdtdesà1 — 3278 














Firebug 会 将 404 的 请 求 高 亮 显示 出 来 。 


Firebug 高 亮 显示 了 404 结果 的 请 求 。 通 过 将 文件 放 到 正确 的 位 置 或 者 修 
改 CSS 属 性 ,来 修改 这 个 问题 这样 ,你 就 能 更 有 效率 地 使 用 服务 器 的 资源 
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Page Speed 是 Google 内 部 已 经 在 使 用 的 一 款 提高 网 络 应 用 程序 性 能 的 工具 。 
像 YSlow 一 样 ， 它 是 一 款 Firebug 的 插件 。 


虽然 有 些 相 似 ， 但 Page Speed 还 提供 了 一 些 YSLow 没有 的 特性 。 





























Toy 













































































e JavaScript 事件 
。 显示 没有 使 用 的 Css 样式 
。 显示 效率 不 高 的 CSS 选择 器 


让 络 应 用 能 够 从 如 此 精细 的 优化 中 获 益 匪 浅 ， 而 这 个 插件 显然 非常 适合 大 型 
中 络 应 用 。 作 为 一 名 网 络 应 用 开发 人 员 ， 为 什么 不 试 一 下 昵 ! 
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为 销售 而 设计 一 提高 访客 转化 率 


















































村 个 网 站 的 站 长 都 希望 网 站 表现 很 好 ， 获 得 更 多 的 销售 额 、 用 户 注 册 或 者 
RSS 订阅 者 。 那 么 如 何 将 一 个 新 的 访客 转化 成 为 忠实 的 客户 呢 ?” 本 章 将 着 眼 
效 的 销售 理论 并 提供 一 些 提高 访客 转化 率 的 特殊 技巧 。 

大 多 数 漂亮 或 者 给 人 印象 深刻 的 网 站 并 不 仅仅 是 件 艺术 品 ， 它 们 的 功能 界 画 
都 服务 于 一 定 的 目的 。 如 果 你 经 营 一 家 在 线 商店 ， 你 的 目的 就 是 卖 出 更 多 的 
商品 。 如 果 您 运行 了 Web 应 用 程序 ， 您 希望 更 多 的 用 户 来 注册 。 不 管 您 在 

















































































































































































































































































































什么 行业 、 经 营 什么 样 的 商业 、 组 织 或 者 社区 ， 您 都 希望 通过 网 站 来 提高 销 
额 、 注 册 量 、RSS 订阅 数 或 者 点 击 量 。 



































































































































多 数 站 长 都 希望 有 一 个 很 高 的 转化 率 。 但 是 ， 怎 么 样 才能 把 新 访客 转化 成 忠实 客户 
Ne? 

































































“转化 ”是 在 线 营销 的 一 个 术语 ， 描 述 了 网 站 访客 做 出 站 长 期 望 的 动作 这 一 
过 程 。 例 如 ， 如 果 你 经 营 一 家 在 线 商 店 ， 销 售 一 件 商 品 就 是 一 次 转化 ， 如 果 
是 博客 ， 增 加 一 个 订阅 就 是 一 次 转化 。 转 化 的 效率 用 网 站 的 全 部 访客 与 进行 
了 特定 动作 的 访客 之 比 一 一 转化 率 来 表示 。 


为 了 解答 这 个 问题 ， 我 们 先 来 看 看 如 何 进行 有 效 的 销售 。 


7.4 如何 销售 ? 


























































































































































































































要 更 有 效 地 销售 ， 你 必须 销售 解决 方案 ， 而 不 仅仅 是 产品 。 还 需要 让 用 户 受 
益 ， 而 不 仅仅 只 是 提供 产品 特性 。 用 户 并 不 是 需要 产品 、 服 务 或 是 特性 ， 他 
们 需要 解决 自己 问题 的 整体 方案 。 特 性 是 产品 或 者 服务 外 在 的 修饰 品 ， 而 受 
益 是 用 户 使 用 产品 过 程 中 获得 的 ， 促 使 他 们 最 终 购 买 产品 的 原因 。 例 如 ， 对 
顾客 来 说 ，iPod Nano 有 16GB 的 空间 只 是 说 明了 产品 的 技术 细节 但 是 没 丰 
说 明 它 能 给 用 户 带 来 什么 。 假 如 说 iPod Nano 可 以 容纳 4000 S già DU AAG 
地 表明 了 高 存储 给 用 户 带 来 的 好 处 。 这 恰好 解决 了 用 户 希 望 将 整个 音乐 库 装 
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7.2 AIDA ( 注意 力 、 兴 趣 、 期 望 、 行 动 ) 众 妙 之 门 








入 口袋 的 需求 。 



































































































































这 些 障碍 正 是 客户 不 购买 产品 的 原因 。 这 些 障碍 或 大 或 小 ， 也 许 他 们 讨厌 你 
的 产品 或 者 只 是 没有 购买 的 预算 ， 也 许 他 们 没有 看 到 自己 需要 的 特性 或 者 认 
为 太 贵 或 者 他 们 不 喜欢 这 个 颜色 。 






































旦 你 了 解 了 你 正在 出 售 的 产品 ( 对 于 产品 的 解决 方案 和 带 给 客户 的 好 处 了 如 指 掌 ) 
你 就 需要 去 打破 客户 评估 你 的 商品 时 产品 和 客户 之 间 的 障碍 。 





























































































































这 些 障碍 有 希望 被 打破 和 处 理 。 例 如 ， 如 果 潜在 客户 觉得 产品 价格 太 贵 ， 那 
么 就 给 客户 指出 他 花 这 笔 钱 之 后 ， 将 会 为 他 节省 多 少时 间 和 精力 。 


如 果 产 品 缺 乏 特性 ， 那 就 可 以 谈 一 些 通用 的 解决 方法 ， 毕 竟 ， 客 户 其 实 只 是 
在 为 他 们 的 问题 寻找 解决 方案 而 不 是 十 分 关心 产品 特性 。 如 果 你 能 说 服 客户 ， 
你 的 产品 能 够 解决 他 的 问题 ( 也 许 和 客户 心目 中 的 方案 不 太一 样 )， 你 就 可 
以 成 功 。 


7.2 AIDA ( 注意 力 、 兴 趣 、 期 望 、 行 动 ) 


AIDA 代表 了 注意 力 、 兴 趣 、 期 望 、 行 动 ， 是 一 个 非常 流行 的 销售 方法 。 
AIDA 是 为 销售 广告 确定 基调 的 指导 。 任 何 销售 广告 的 目标 都 是 完成 交易 ， 
任何 方法 都 应 该 力争 做 到 效果 最 大 化 。 到 最 后 销售 时 ， 目 标 客户 已 经 非 
常 希 妆 a ee ee TÉ, AIDA 也 可 以 用 于 客户 
停 在 网 站 的 这 段 时 间 ， 这 个 时 候 面 向 用 户 的 不 是 销售 人 员 ， 而 是 我 们 的 
网 站 。 
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ADA 广告 的 第 一 阶段 是 “吸引 注意 ”。 这 一 点 非常 重要 ， 因 为 潜在 客户 可 能 
会 飞快 地 浏览 你 的 网 站 然后 离开 。 你 只 有 一 段 很 短 的 时 间 来 抓 住 客户 注意 力 ， 
并 且 促 成 一 桩 交易 。 这 段 时 间 绝 对 是 非常 重要 的 

的 一 切 都 是 徒劳 的 。 一 定 要 通过 你 的 解决 方案 能 给 客户 带 来 的 生活 改变 来 吸 
引 客 户 。 简 洁 、 有 力 、 清 晰 地 告诉 用 户 关注 我 们 的 原因 。 
接 下 来 两 个 阶段 , “兴趣 ”和 “购买 欲望 ”是 销 
意 力 ”的 阶段 做 了 足够 的 文章 ， 现 在 就 是 巩固 
产品 用 途 以 及 带 给 用 户 的 真实 价值 。 不 断 传达 各 









































































































































































































































































































































J 时 候 了 。 清 晰 、 简 洁 地 介绍 
全 访客 能 享受 的 收益 来 激 起 他 
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为 销售 而 设计 一 提高 访客 转化 率 
































的 购买 欲望 。 如 果 你 为 访客 描绘 了 一 幅 棚 棚 如 生 的 画面 ， 让 用 户 觉 得 从 
的 产品 可 WHEE EBS NS ii. als 么 他 们 的 购买 欲望 望 EG 就 会 影 长 起 来 。 
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ifs Highrise” 

Track your Leads, 
Contacts, & Deals 
with Highrise. 

‘The smarter way to keep track of 


| 

| 

the people you do business with. — | 
easter a EEEa 

P. c | | 

| 






Highrise prepares you for your next call, next meeting, 
next pitch, next follow-up, and next sale. 











‘Thousands of small businesses and entreprene 
ae z= 
d» bued. That means o: 
oad 
brine west 


odi n 
Saians ard ore Seabees "s 


37signals tye 


















































来 自 37Signals 的 网 站 The Highrise 使 用 了 AIDA 的 方法 来 延长 会 话 时 间 。 Eier 
网 站 通过 非常 精炼 的 产品 概述 和 让 客户 受益 来 抓 住 访客 的 注意 力 ,“ 与 商业 伙伴 
保持 沟通 的 好 方法 "。 然 后 通过 一 个 给 用 户 带 来 好 处 的 列表 吸引 了 访客 的 兴趣 。 
那些 谈论 Highrise 如 何 帮助 商业 公司 的 视频 引起 了 访客 的 购买 欲望 。 最 后 ， 一 个 
很 大 的 按钮 诱 使 你 去 看 看 计划 的 价格 列表 。 















































































































































































































































最 后 一 步 就 是 “行动 "。 如 果 我 们 是 在 销售 有 形 的 产品 ， 可 以 邀请 用 户 购 买 
J 款 。 如 果 你 的 产品 是 网 络 应 用 或 者 服务 ， 我 们 就 需要 吸 
引 访客 去 注册 。 在 这 个 阶段 ， 我 们 需要 终结 一 次 交易 ， 所 以 将 访客 的 注意 
吸引 到 行动 上 是 非常 重要 的 。 那 些 想 购买 的 人 们 ， 只 需 得 到 最 后 的 如 何 付款 
或 者 注册 的 指引 ， 那 些 还 在 观望 的 人 们 则 需要 我 们 最 后 再 推 一 把 。 
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7.8 ”展示 产品 众 妙 之 门 


最 近 ， 人 代表“ 满意 ”的 S$ 加 入 到 AIDA 中 来 。 能 够 得 到 用 户 已 经 很 好 ， 如 果 
再 能 让 客户 将 你 的 产品 推荐 给 他 的 朋友 ， 

































































































































































LIE M TENER 注意 力 
下 就 更 棱 了 。 这 样 你 就 能 确信 客户 对 服务 
韭 党 fy 3c n 3 兴趣 
非常 满意 。 我 们 不 需要 将 产品 做 到 完 B 













































































A 
l 
但 是 我 们 应 该 为 用 户 提供 一 流 的 服务 。 解 Ma D 
决 用 户 服务 问题 是 培养 中 实用 户 的 好 方法 ， 行动 A 
这 表现 在 客户 遇 到 突 发 问题 时 公司 仍 是 
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可 靠 的 伙伴 。 













































































AIDA 销售 策略 























7.3 ”展示 产品 


如 果 在 实体 商店 购买 产品 ， 不 但 可 以 看 到 还 可 以 亲自 体验 这 些 产品 。 在 购 
买 之 前 能 够 看 到 产品 为 客户 提供 的 更 多 信息 。 你 对 将 要 购买 的 产品 也 会 充 
满 好 感 。 
EE 当 客户 在 线 购物 时 ， 我 们 能 够 得 到 的 信息 类 型 就 非常 有 限 ， 而 有 的 网 站 
连 产 品 的 外 观照 片 都 没有 。 


即使 是 销售 数字 产品 ， 例 如 桌面 或 者 网 络 应 用 程序 ， 展 示 一 些 截图 或 者 视频 
是 非常 必要 的 。 访 客 看 到 产品 的 外 观 后 ， 他 们 就 可 以 想象 实际 使 用 的 情形 。 
对 用 户 来 讲 ， 这 非常 重要 。 如 果 能 够 让 潜在 客户 想象 使 用 产品 的 情形 ， 你 就 

,经 开始 勾 起 他 们 的 购买 欲望 了 。 更 重要 的 是 ， 好 看 的 外 观 不 仅仅 会 吸引 访 


客 ， 还 传递 给 访客 易于 使 用 的 信息 。 


e Numbers '09 “x 


What's new What is Numbers? 
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1 Li 
New in Numbers '09 
Writing formulas. Organizing data. Creating 
charts. With new features that are easy to use, 
anyone can be good with numbers. 



































Apple 公司 在 页 面 顶部 为 他 的 

















| Numbers 放 了 很 多 大 截 
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1 “Apparent Usability vs. Inherent Usability: Experimental Analysis on the Determinants of the Apparent 


Usability" ,by Masaaki Kurosu and Kaori Kashimura, CHI’ 95 Conference Companion, 1995, p.292-293, 
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为 销售 而 设计 一 提高 访客 转化 率 





7.4 使 用 视频 展示 产品 


视频 正 逐 渐 成 为 在 线 展示 产品 的 一 种 极 受 欢迎 的 媒介 ， 特 别 是 对 于 像 桌 面 或 
者 网 络 应 用 程序 这 样 的 数字 产品 。 这 是 因为 在 一 个 视频 短片 中 你 能 提供 比 文 
字 和 截图 更 多 的 内 容 。 对 访客 来 说 ， 视 频 只 要 看 和 听 就 可 以 了 ， 这 对 他 们 来 





























































































































































































































使 用 视频 展示 的 最 好 方法 是 将 视频 放 在 登录 页 的 显著 位 置 。 如 果 事 先 能 够 闪 
备 一 份 有 声 的 底稿 放 在 视频 的 项 部 , 在 声音 不 清楚 的 时 候 避 免 访客 发 生 误解 。 
底稿 应 该 保持 简洁 并 且 切 中 要 点 。 


视频 非常 适合 AIDA 的 结构 ， El 先 你 可 以 谈 一 产品 能 够 解决 什么 问 gj 题 
产品 是 如 何 解决 问题 的 ， 能 够 给 客户 带 来 什么 好 处 ， 接 下 来 你 就 要 邀请 用 广 
注册 或 者 继续 浏览 网 站 来 获得 更 多 信息 了 。 


7.5 可 以 浏览 的 功能 列表 


如 果 你 正在 销售 一 件 产品 或 一 项 服务 ， 肯 定 会 有 一 扒 的 功能 要 去 宣传 。 你 非 
常 希 望 人 们 能 够 看 到 "— 列表 往往 是 单调 的 ， 特 别 是 列表 
包含 了 过 多 文字 的 时 候 。 人 们 浏览 网 站 时 一 定 不 会 花 太 多 精力 去 读 你 的 广 
所 以 你 要 想 办 法 把 列表 尽力 做 得 简明 易 懂 。 幸 运 的 
EE， 已 经 有 很 多 现成 的 方法 可 供 我 们 参考 。 


首先 使 用 图 标 或 图 片 。 功 能 描述 列表 旁边 的 小 图 标 就 像 是 项 目 符号 。 我 们 可 
义 很 容易 地 注意 到 这 些 分 布 在 页 面 上 的 小 锚 点 。 图 标 或 图 片 比 文字 更 有 趣 、 
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为 每 个 功能 使 用 短 标题 ， 一 般 是 很 少 的 几 个 词 或 短 句 ， 能 够 和 图 标 一 起 一 
览 而 过 。 为 了 吸引 访客 注意 ， 字 体 要 比 描述 文本 大 ， 而 且 和 背景 的 对 比 度 
也 要 强烈 一 些 。 短 标题 下 方 应 当 是 稍微 详细 一 点 的 描述 ， 描 述 的 字体 要 小 
一 些 、 对 比 度 要 弱 一 些 。 这 部 分 的 元 素 应 该 淡 入 背景 ， 如 果 访客 喜欢 这 个 
题目 ， 他 们 会 仔细 阅读 这 些 内 容 ， 同 时 描述 部 分 不 会 妨碍 访客 浏览 整个 列 
表 。 最 后 ， 在 每 个 项 目 之 间 添 加 足够 的 空白 更 有 县 
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7.6 馈赠 让 客户 想 回 报 众 妙 之 门 





Hil'mBarry.  . 

I'm helping 1000s of 
business owners save 
time and grow their 
online business. How? 


They're using GoodBarry - my integrated system 
that runs their website, email marketing and online S 
shop while automatically growing their customer T ^4 $830 *^ - 1 
database. My customers have one central console ————— = 
with everything they need to run their business. 
At only $39/month for the entire package and no 
contracts, shouldn't you join them? 








watch the video — Es 











Bu 
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GoodBarry 的 登录 页 能 入 了 一 个 很 大 的 截图 视频 。 巨 大 的 播放 按钮 吸引 
意 ， 促 使 他 们 点 击 它 。 
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Track leads & deals Manage email better 

© Monitor pending sales leads, » Easily forward or bcc: your emails 
proposals, wins & losses. ~ 一 right into Highrise. 

会 Easy import & export Follow-up on time 

V Outlook, Excel, CSV, vCard, ACT! E Highrise sends instant reminders 
and Basecamp contacts. via email or SMS/text. 
Review conversations Hn Centralize contacts 

& A history of calls, meetings, and ‘$h Maintain one address book for your 
conversations with your contacts. entire company online. 
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Highrise 网 站 上 的 列表 综合 使 用 了 小 图 标 、 对 比 度 和 空 向 ， 整 个 列表 变 得 非常 容 
浏览 。 另 外 ， 每 行 中 还 有 能 够 带 给 访客 更 多 有 用 信息 的 描述 文字 。 


7.6 ”馈赠 让 客户 想 回 报 


m 将 你 带 到 销售 或 者 谈话 中 的 技巧 , 就 是 免费 赠送 。 当 你 收 到 一 份 礼物 ， 
你 会 有 种 想 要 报 达 的 感觉 ， 同 样 回馈 一 些 东西 。 Robert Cialdini 是 阐述 影响 
力 方面 的 最 好 的 作者 之 一 ， 在 《影响 力 : 科学 与 实践 》 分 享 了 一 些 


如 何 利用 赠品 帮助 销售 的 案例 。 如 果 从 陌生 人 那里 接收 了 一 个 小 礼物 ， 人 们 
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Cialdini, R., Influence:Science and Practice, 5th ed.,(Allyn & Bacon 2008), 
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为 销售 而 设计 一 提高 访客 转化 率 









































































































































































































































































































































































































































































































































































































































































































































































































































从 他 们 那里 购买 奖券 的 几率 就 增加 了 一 倍 。 付 给 五 美元 填写 一 份 问卷 和 完成 
一 份 问卷 后 付 给 五 十 美元 比 起 来 ,客户 更 倾向 于 立刻 获得 五 美元 。 在 饭店 中 ， 
随 账单 附 赠 一 些 糖 果 能 够 让 顾客 为 你 提出 更 有 价值 的 建议 。 
mW Linkscape E Trifecta 
| Q5 A professional quality Inlink tool that - Measures metrics to estimate the 
uses patented SEOmoz metrics. === relative popularity and Importance of 
FREE!  Inlinks, anchor text distribution and FREE! Page, Blog or Domain. Trifecta 
more. Linkscape's metrics are also replaces SEOmoz's Page Strength 
avallable in the Site Intelligence tool. 
Service API. 
Py Term Target (a) Backlink Analysis Tool 
| © Helps determine how targeted a | dk Get an advanced look at the 
———- particular page Is for a specified ™— keywords websites are linking to you 
FREE! keyword by analyzing a varlety of with. 
factors. 
SEOmoz Firefox Toolbar IP SEOmoz Labs 
The power of Linkscape Is now PE SEOmoz Labs Is a place where our 
— avallable Inside Firefox with the — more adventurous PRO users can 
FREE! SEOmoz Toolbar. check out the bleeding edge of 
SEOmoz technology and product 
design. 
SEOmoz 为 专业 的 SEO 人 士 提供 商 业 T, 同时 也 提供 很 免费 的 小 工具 。 这 是 
一 个 吸引 人 气 和 投资 回报 的 好 方法 。 
部 么 ,在 你 的 网 站 上 ,你 要 送出 什么 礼品 才能 让 用 户 觉 得 自己 需要 去 回报 呢 ? 
如 果 销 售 软件 ， 尝 试 一 下 赠送 30 天 的 免费 试用 资格 ? 或 许可 以 通过 将 产品 
的 一 部 分 功能 完全 免费 发 放 ， 而 采取 “增值 服务 ”模式 ， 即 免费 使 用 基本 功 
能 而 需要 为 额外 的 功能 付费 ? 一 些 网 站 制作 了 很 多 小 工具 免费 发 放 给 用 户 。 
例如 ，37signals 提供 了 Tadalist 和 Writeboard 的 免费 工具 ， 这 些 是 其 商业 版 
本 的 一 些 附 加 组 件 。 通 过 为 客户 提供 一 些 免 费 的 应 用 ， 客 户 就 更 加 倾向 于 先 
试用 ， 然 后 购买 其 他 部 分 的 功能 。 
S 
7.7 Mabe 
从 众 心 理 是 一 种 心理 学 现象 。 当 人 们 不 确定 应 该 采用 什么 步骤 时 ， 他 们 通常 
会 选择 同 其 他 人 一 样 。 例 如 ， 一 个 著名 实验 ， 一 些 人 站 在 原 地 仰望 天 空 ， 和 
多 路 人 注意 到 后 也 开始 仰望 天 空 ， 想 看 到 其 他 人 在 看 什么 。 实 验证 明 ， 从 众 






































7.9 永远 提供 下 一 步 操作 众 妙 之 门 






































心理 对 人 的 影响 力 非常 大 ， 以 至 于 到 最 后 为 了 避免 堵塞 交通 不 得 不 终止 。 


人 们 跟随 别人 的 时 候 觉 得 更 加 放心 。 如 果 他 们 看 到 其 他 人 买 了 一 件 商品 ， 他 
们 会 放心 地 去 买 ， 因 为 他 们 知道 这 件 商品 很 流行 。 这 非常 好 ， 不 是 吗 ? 我 们 
以 利用 从 众 心理 来 帮助 提高 产品 销量 或 服务 的 转化 率 ， 大 量 地 进行 广告 宣 
传 ， 将 产品 的 流行 性 以 及 已 往 客户 的 好 评 告 知 潜在 客户 。 例 如 ， 用 户 评论 是 
推荐 产品 的 好 方法 。Amazon 做 过 类 似 的 事情 ， 其 在 页 面 上 嵌入 了 一 个 “ 买 
过 这 件 商品 的 用 户 还 购买 过 ”的 版 块 ， 中 间 展 示 了 基于 其 他 用 户 购 
选 出 来 的 商品 。 
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Customers Who Bought This Item Also Bought Page 1 of 19 
q D 
Logitech V220 Cordless. Toshiba Satellite. Logitech Optical Kingston DataTraveler 4 Toshiba Satellite. 
Optical Mouse for A305-S6908 15.4-Inch Notebook Mouse Plus GB USB 2.0 Flash Drive L305-S5924 15.4-Inch 
lotebooks (Dark Silver) Laptop L 
Alir (073) $24.99. Ardi (46) $849.84 Airi (095) $13.23 让 让 友信 页 (685) $10.93 Arferir (20) $519.99 



































Amazon 推荐 的 购买 相同 产品 的 客户 还 购买 了 的 商品 。Amazon 还 允许 用 户 对 7 
品 进行 评论 ， 很 好 地 利用 了 从 众 心 理 现 象 。 


7.8 隐 性 的 建议 

























































































片 和 组 件 对 用 户 的 影响 也 起 到 重要 作用 。 研 究 表明 ， 给 一 个 孩子 展 
圣诞 老人 的 帽子 可 以 增加 他 们 与 其 他 人 分 享 糖果 的 可 能 性 ， 而 向 他 展示 Toys 
‘R? Us ( 玩具 反 斗 城 ) 的 标志 则 会 起 到 相反 的 作用 。 商 家 经 常会 将 某 种 图 
和 标志 与 商品 之 间 建 立 联系 ， 当 向 用 户 展示 精心 挑选 的 图 片 时 ， 用 户 就 会 
身 于 这 种 环境 ， 并 作出 商家 期 望 的 动作 。 
在 网 站 设计 中 可 以 使 用 这 个 办 法 。 不 要 仅仅 为 了 装饰 而 选用 图 
虑 你 希望 给 访客 什么 样 的 情感 体验 。 你 想 从 图 片 传达 什么 信和 
敢 些 有 意义 的 图 片 ， 这 样 当 他 们 看 到 图 片 时 ， 脑 中 就 会 定格 
95— tis El H o 


7.9 了 永远 提供 下 一 步 操 作 


什么 时 候 应 该 结束 推销 ? 这 个 问题 的 答案 很 简单 : “永远 不 要 结束 推销 " 。 你 
将 在 不 同 的 阶段 、 以 不 同 的 速度 将 访客 转化 为 客户 。 所 以 继续 推销 ， 你 可 
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与 产品 相关 的 
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为 销售 而 设计 一 提高 访客 转化 率 



































义 将 那些 已 经 打 定 主意 的 访客 拉 到 我 们 的 营销 中 来 ， 他 们 所 要 做 的 只 是 最 
注册 。 在 网 站 的 每 个 页 面 上 都 提供 购买 、 注 册 或 者 订阅 的 链接 ， 
的 页 面 上 也 许可 以 出 现 多 次 。 当 然 ， 不 要 在 页 面 中 过 度 地 堆积 这 些 操作 ， 
而 应 适度 地 提供 一 些 捷径 ， 让 准备 好 注册 的 人 们 随时 可 以 点 击 。 


















































































































































































































































Legacy Locker Features Why Legacy Locker? Pricing & Sign Up Support 







The safe and secure way to pass 
your online accounts to your 
friends and loved ones. 

Legacy Locker is a safe, secure repository for your digital 


property that lets you grant access to online assets for 
friends and loved ones in the event of death or disability. 


The value of Protect your Privacy and Family and Financial and 
web accounts online assets security loved ones estate planners 














Legacy Locker 展示 了 一 个 幸福 的 家 庭 照 片 , 旁边 并 附 有 介绍 , 以 引起 访问 者 注意 ， 
去 照顾 和 保护 他 们 的 亲人 。 


我 们 需要 致力 于 保持 流程 的 畅通 ， 也 就 是 说 不 能 有 死胡同 。 例 如 ， 当 访客 浏 
览 到 营销 广告 或 宣传 信息 的 底部 时 ， 下 一 步 要 去 哪儿 ? 在 类 似 版 块 或 者 子 版 
块 的 位 置 提供 一 个 到 下 一 个 版 块 的 链接 。 通 过 引导 , 而 不 是 让 访客 自己 去 寻找 ， 
来 帮助 他 们 更 容易 地 浏览 我 们 的 广告 。 可 以 通过 在 简要 介绍 底部 添加 “了 解 
更 多 "立即 购买 ”或 “浏览 网 站 ”标签 , 确保 访客 总 是 知道 下 一 步 要 做 什么 
当 他 们 浏览 完 一 个 章节 ， 一 个 链接 就 像 在 等 待 指引 他 们 进行 下 一 个 阶段 。 


7.10 ”使 用 稀缺 性 来 促进 需 ; 


当 限 量 版 的 商品 开始 售卖 时 ， 能 够 拥有 它 会 带 给 他 的 主人 一 种 优越 感 。 医 
为 这 类 商品 一 旦 售 出 ， 再 想 购 买 就 非常 困难 了 ， 因 此 商品 的 价值 就 提升 了 。 
Google 第 一 次 推出 自己 的 电子 邮件 应 用 Gmail 的 时 候 ， 就 利用 了 稀缺 性 。 
们 通过 限制 使 用 权限 来 创造 稀缺 性 ， 你 只 有 被 已 经 拥有 账号 的 人 邀请 才能 
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7.10 使 用 稀缺 性 来 促进 需求 众 妙 之 门 







































































。 人 能够 拥有 一 个 Gamil 变 成 了 一 种 特权 ， 人 们 比 免费 开放 注册 的 时 候 更 希 





























[Skype] sospecem ia ,aa 
Download | Use Skype | Business Shop Account 


Home GetConnected Features Mobile Prices Share All 





Stay closer. Every day. 


F3Seeitinaction =} Leam more 





Freedom with 3 

Free Skype-to-Skype calls on wide range of 
handsets from 3. 

Find out more 


@ Free calls over the 
internet 

Ri It's what Skype's made for. Make free Skype- 
d oops — 24/7 anywhere in the world. 
Skype 页 面 中 没有 死 链 接 。 注 意 ， 每 个 功能 描述 下 方 都 是 一 个 或 多 个 下 一 步 的 链 
接 ， 比 如 “了 解 更 多 ”或 者 “马上 体验 ”。 

稀缺 性 还 会 让 访客 认为 如 果 他 们 动作 慢 了 ,很 可 能 就 会 错过 这 次 购买 的 机 会 ， 
天 行动 。 对 限量 供应 或 库存 有 限 的 产品 进行 广告 宣传 是 个 很 好 
的 办 法 ， 那 些 本 来 无 意 的 人 们 会 马上 购买 或 注册 。 




















































































































































































































Intel X25-E Extreme 32GB 2.5" SATA-II Solid State 


Hard Drive (SSDSA25H032G1) 
v The Intel Extreme SATA-II Solid-State Drive (SSD) offers Intel 10+ in £324.99 (Buy) 
outstanding performance and reliability for servers, storage, and stock (£282.60) 
high-end gaming systems. 


ttrt 
Intel X25-E Extreme 64GB 2.5" SATA-II Solid State 
Hard Drive (SSDSA2SH064G1) 
The Intel Extreme SATA-II Solid-State Drive (SSD) offers i £599.99 
H outstanding performance and rellability for servers, storage, and ine 1 in stock (£521.73) 1 (Buy) 


high-end gaming systems. 
www 


Intel X25-M Mainstream 80GB 2.5" SATA-II Solid State 


Hard Drive (SSDSA2MH080G1) — 
The Intel X25-M SATA-II Solid-State Drive brings anew level of Intel — 4instock (22869) |1 (Buy>) 
performance and reliability to laptop and desktop PC storage. 
titti 


BIRRE “ABFA” IE, Overclockers 在 库存 水 平 较 低 时 显示 准确 的 
库存 数目 ， 这 会 促使 想 要 购买 的 客户 抓紧 时 间 行 动 。 因 为 错过 这 个 机 会 ， 他 
可 能 就 买 不 着 了 。 
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为 销售 而 设计 一 提高 访客 转化 率 





7.11 退 款 保障 ， 消 除 客 户 的 后 顾 之 忧 


风险 是 完成 访客 转化 的 最 大 障碍 之 一 。 人 们 能 相信 你 的 公司 吗 ? 如 果 你 的 产 
品名 不 符 实 怎 么 办 ?如果 客户 发 现 了 更 好 的 商品 怎么 办 ? 风险 在 客户 脑 中 1 














































































































































































































































































































































































































































































































下 了 疑虑 的 种 子 。 因 为 这 里 有 大多 的 不 确定 ， 所 以 他 们 决定 不 了 是 否 购 买 你 
的 产品 或 者 进行 注册 。 谢 天 谢 地 ， 我 们 有 一 个 处 理 风 险 的 好 办 法 ， 消 除 客 

对 风险 顾虑 的 最 好 办 法 就 是 退 款 保障 。 

退 款 保障 意味 着 ， 在 一 定时 间 内 ， 如 果 客 户 觉得 不 满意 ， 可 以 把 货物 送 回来 
然后 取 回 货款 。 你 不 应 当 为 这 个 感到 害怕 ， 如 果 你 的 产品 是 好 的 ， 很 少 会 

客户 进行 退货 。 退 款 保障 甚至 对 你 的 业务 来 说 更 有 益 ， 如 果 你 不 提供 退 款 保 
障 ， 而 客户 又 非常 希望 把 他 的 钱 拿 回 来 ， 他 可 以 请 求 银 行进 行 退 款 。 这 样 你 




































































就 会 收 到 银行 的 借 项 冲 回 通知 ， 你 不 得 不 在 退 款 的 基础 上 缴纳 额外 的 费用 。 
提供 退 款 保障 意味 着 不 需要 额外 的 结算 费用 ， 还 可 以 获得 更 多 的 用 户 ( 低 风 
险 ) 对 于 公司 的 舍 赖 。 


7.12 ”鼓励 用 户 试 用 


销售 产品 的 一 个 最 好 办 法 就 是 让 用 户 试用 。 用 户 试用 时 ， 他 们 就 可 以 了 解 产 
品 使 用 效果 ， 这 比 仅仅 看 看 产品 或 想 一 下 要 真实 得 多 。 他 们 在 实际 使 用 时 融 
。 他 们 开始 体验 ， 了 解 产品 如 何 工作 并 且 如 果 是 一 款 软件 应 用 ， 他 们 
会 将 自己 的 数据 导入 其 中 。 总 体 来 说 ， 他 们 更 多 地 参与 了 这 个 产品 ， 
机 会 也 显著 地 提升 了 。 


[0 果 你 销售 的 是 数字 产品 ， 如 桌面 或 Web 应 用 等 ， 为 什么 不 能 让 人 们 尝 
试 一 下 ? 许多 应 用 程序 提供 在 线 演 示 ， 人 们 可 以 登录 和 使 用 而 无 需 购 买 。 
也 有 不 少 使 用 增值 服务 模式 ， 即 人 们 可 以 使 用 该 产品 免费 的 基本 版 本 ， 而 
必须 为 额外 的 功能 进行 付费 。 这 是 个 很 好 的 主意 ， 因 为 访客 开始 做 两 件 事 
B: 他 们 了 解 产品 如 何 工作 ， 他 们 保存 了 自己 的 数据 。 高 级 用 户 在 你 的 
产品 上 投入 时 间 ， 因 此 在 他 们 需要 使 用 更 高 级 的 功能 时 倾向 于 使 用 你 的 产 
品 ， 很 可 能 会 进行 一 次 专业 的 升级 。 另 一 种 让 访客 试用 的 方法 是 限制 一 个 
试用 期 。 
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7.43 别 让 邮寄 费用 吓 跑 了 顾客 众 妙 之 门 





Who Should Read This Book? 





If you're working on the Web today, you need a 
copy of this book to understand exactly why 
some designs work, while others don't. It covers 
graphic design principles in a very 
straightforward and easy-to-follow way: you 
don't need to have had any formal art or design 
training to benefit from this book. 





No-risk Money-back Guarantee 





Of course we're so confident that you'll treasure this book for years to come that we're 
happy, as always, for you to try it risk-free for 30 days. If you purchase a copy of The 
Principles of Beautiful Web Design and you think it fails to be everything you wanted, we 
would like you to have your money back. 


Simply contact us and we will see to it that you receive a prompt and courteous refund of 
the full purchase price minus shipping and handling. 


What could be fairer than this? 
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Sitepoint 为 其 书籍 提供 30 天 退 款 期 ， 也 就 是 说 ， 用 户 
如 果 他 们 觉得 产品 不 好 ， 就 可 以 收 到 退 款 。 


临 的 风险 是 非常 小 的 : 




















Home imagoEditor PhotoExpress FAQ API Contribute Biog Contact 





Fiter & adjustments 


We bring you advanced online image 
and photo editing tools, just choose 
your flavor, jump in and start 
creating! 







wicked tools 


Jump in n' get started! 
eeocoeo0ec0o0ecococ 


GB fo0THIS aif. 


Hard to understand the advanced editor? Try the fresh pixir photo 






























































express! layers nt afte 
Follow pide on differ GET FIREFOX ADD-ON NOWI ^ 
NS >» e en E custom beushes 
Pixlr, &-F Web 的 图 像 编 辑 软 人 正确 的 演示 链接 登录 页 面 。 点 击 



















































它 可 以 让 你 即刻 体验 产品 ， 而 不 必 尘 王 何 个 人 信息 。 


7.13” 别 让 邮寄 费用 吓 跑 了 顾客 


1 
ForeSee Results 的 一 项 研究 表明 ， 通 过 对 30 家 在 线 商店 的 10500 项 交易 分 
析 得 出 ，34% 的 客户 因为 在 线 商店 不 承担 运费 而 取消 了 交易 。 人 们 和 希望 看 型 
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http://www.foreseeresults.com/Thank_Top100_Mayo8.html. 
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为 销售 而 设计 一 提高 访客 转化 率 















































购物 篮 中 的 价格 就 是 最 后 需要 支付 的 价格 。 在 结算 的 最 后 环节 ， 他 们 不 想 
到 的 是 额外 的 成 本 。 


提供 免费 的 邮寄 肯定 可 以 刺激 销售 , 但 是 却 不 针对 所 有 网 站 都 是 可 行 的 选择 。 
如 果 确 实 需要 收取 邮费 ， 那 么 一 定 要 做 到 透明 ， 提 供 清晰 简单 的 邮寄 选项 。 
在 这 个 阶段 ， 你 不 想 让 潜在 客户 为 他 们 需要 支付 多 少 邮寄 费用 而 困惑 ， 这 诡 
该 是 清晰 明了 的 。 最 好 的 办 法 就 是 在 客户 的 结算 页 , 当 客 户 选择 邮寄 方式 后 ， 
更 新 显示 总 的 邮寄 费用 ， 并 最 终 体现 在 总 价 上 。 你 还 应 当 让 邮寄 选项 清晰 、 
易于 选择 ， 因 为 客户 不 想 在 支付 环节 上 有 所 耽误 。 


7.14. 消除 选择 麻 疗 


择 麻 首 是 营销 领域 的 一 个 概念 。 描 述 了 顾客 面临 太 多 相同 类 型 、 缺 少 
时 的 状态 。 例 如 ， 当 你 走 进 超市 想 要 购买 意大利 面 ， 可 能 会 看 到 4 
各 种 品牌 、 形 状 不 同 的 意大利 面 。 那 么 你 会 选择 哪个 ? 哪个 更 好 
当选 择 太 多 时 ， 你 变 得 麻木 而 不 知道 选 哪个 好 。 选 择 麻 痛 不 仅仅 延长 】 "m 
NALA), MABAAIGA HAIR. DIRE hie [KEK an, 
他 会 后 悔 花 了 这 么 多 时 间 、 后 悔 没有 选择 其 他 的 商品 。 为 了 帮助 顾客 克服 选 
择 麻痹 ， 你 应 该 让 产品 系列 保持 较 小 的 规模 ， 并 且 在 产品 之 间 有 所 区 分 。 如 
果 你 仍然 有 很 多 的 选择 而 无 法 再 减少 了 ， 就 给 顾客 推荐 一 款 ， 例 如 最 流行 的 
产品 或 者 服务 计划 。 使 用 视觉 效果 来 突出 推荐 的 选择 ， 计 顾客 一 眼 就 能 够 认 
出 来 。 不 确定 自己 需要 什么 的 人 们 可 以 很 轻松 、 放 心地 选择 推荐 的 产品 ， 而 
部 些 高 级 顾客 则 可 以 很 容易 地 挑选 适合 自己 需要 的 产品 。 
30-day Free Trial on All Accounts 


Pick a plan & sign up in 60 seconds. Over 8,000,000 contacts managed with Highrise. 







































































In 
































v^ 
[m] 




































































































































































































































































































































































分 


ES 
A? 





















































区 
化 
页 










































































































































































































































































































































































































































































































































































Bo” D Lu T Sdo 
Max Premium $49/month Basic Solo 
$149/month $99/month $24/month $29/month 
TOP-OF-THE-LINE FOR BIG GROUPS OUR BEST VALUE FOR SMALL TEAMS FOR INDIVIDUALS 
Unlimited users Up to 40 users Up to 15 users Up to 6 users Single user 
50 GB storage 20 GB storage 10 GB storage 3 GB storage 3 GB storage 
Unlimited deals | Unlimited deals Unlimited deals 10 deals Unlimited deals 
50,000 conta 30,000 contacts. 20,000 contacts 5,000 contacts. 20,000 contacts. 
Enhanced security Enhanced security Enhanced security Standard security Enhanced security 
30-day free trial on all accounts 








Max & Premium plans include Campfire Premium for free. | We also offer a free plan: 2 users, no files, 250 contacts. 





























Highrise 通过 有 效 地 使 用 视觉 效果 突出 了 为 顾客 推荐 的 计划 。 
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7.15 


古 腾 堡 法 则 


众 妙 之 门 


Delivery conditions 


| ee [m ee ene | 


For orders made | For orders made 
For orders made 


UPS 
Expedited 


UPS 
Express 
Plus 


Badgepoint 的 邮寄 信息 表 。 不 要 强 





before 12.00 *) 


Delivery within 3- 
5 working days to 


centers of 
commerce 
6,50 € (from 


200,- € free of |based on UPS price 


charge **) 


For orders made 

before 12.00 *) 

Delivery by next 
working day 
before 12.00 
3096 Discount 
based on UPS 

price list 


For orders made 
before 12.00 *) 
Delivery by next 
working day 
before 10,30**) 
3096 Discount 
based on UPS 
price list 


For orders made 
before 12.00 *) 
Delivery by next 
working day 
before 8,30 **) 


before 12.00 *) 
Delivery within 3-5 
working days to 
centers of 
commerce 
3096 Discount 


list 


For orders made 
before 12.00 *) 
Delivery by next 
working day 
30% Discount 
based on UPS price 
list 


For orders made 
before 12.00 *) 
Delivery by next 
working day before 
12,00 to centers of 
commerce 
30% Discount 
based on UPS price 
list 


For orders made 
before 12.00 *) 
Delivery by next 
working day before 
9.00 to centers of 
commerce 


before 12.00 *) 


Economic delivery 


Optimum transit 
time ***) 
3096 Discount 
based on UPS 
price list 


For orders made 
before 12.00 *) 
Fast economical 
delivery, 
Please check 


For orders made 
before 12.00 *) 
Economic delivery 
Optimum transit 
time ***) 
30% Discount 
based on UPS 
price list 
For orders made 
before 12.00 *) 
Fast economical 
delivery, 
Please check 


exact transit time | exact transit time 


at www. ups.com 
30% Discount 
based on UPS 
price list 
For orders made 
before 12.00 *) 
Fast economic 
delivery. 
Please check 


at www. ups.com 
30% Discount 
based on UPS 
price list 
For orders made 
before 12.00 *) 
Fast economic 
delivery, 
Please check 


exact transit time | exact transit time 


at www. ups.com 

30% Discount 

based on UPS 
price list 


at www. ups.com 

30% Discount 

based on UPS 
price list 









































楚 的 邮寄 解决 方案 。 
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Gutenberg 


重力 是 指 在 





























左 到 右 、 从 


-到 下 。 

















( 或 Gutenberg 法 则 ) 
阅读 时 ， 我 们 的 视线 所 试 


迫 顾 客 去 分 析 这 
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“阅读 重 


样 的 大 表 ， 而 应 该 提供 
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阅读 


方 ， 这 个 路 径 是 从 





为 销售 而 设计 一 提高 访客 转化 率 




















Gutenberg 图 分 为 4 个 区 域 . 
。 左 上 是 主要 的 可 视 区 域 ; 


右上 是 强 余 光 区 ; 
左下 是 弱 余 光 区 ; 
。 布下 是 终结 区 。 


Gutenberg 法 则 告诉 我 们 ， 客 户 多 数 喜 欢 从 左上 开始 看 ， 最 后 终止 在 页 面 的 右 下 。 
同时 也 告诉 我 们 左下 角 得 到 的 关注 是 最 少 的 。 




























































































businesscatalyst 


Home LL Support Blog About Contact 





System Maintenance - This Sunday (24/May) 21-May-200: 


New Business Catalyst Site ~ Business Catalyst 


The best Way =e 


p 2 , businesscatalysf - 
for web designers like you to build 
online businesses for your clients. 





Hundreds of Web Designers love it. Thousands of clients love it. That's a whole lot of lovin’ Watch the video 

























































































BusinessCatalyst 在 登录 页 中 使 用 Gutenberg 法 则 布局 文字 介绍 和 希望 用 户 点 击 的 

按钮 “观看 录像 ”按钮 。 一 个 箭头 有 助 于 引导 访问 者 找到 按钮 。 

我 们 可 以 在 一 个 普通 访客 可 能 
浏览 而 过 的 网 页 中 使 用 这 | 主要 的 可 视 区 域 BRICK 

个 方法 ， 通 过 将 重要 信息 放 在 

左上 区 域 ， 一 个 需要 访客 点 击 

右 侧 区 域 。 注 意 ， 

比 法 则 在 内 容 平 衡 分 布 的 页 面 

上 表现 最 好 。 因 此 ， 如 果 页 面 BA 终结 区 

的 特定 元 素 有 强 的 对 比 度 和 

抢眼 的 颜色 时 ， 即 使 他 们 处 于 一 个 较 弱 的 区 域 ， 仍 然 会 吸引 访客 注意 。 
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7.37 简化 注册 众 妙 之 门 





7.46 ”脚注 


时 你 需要 详细 的 技术 规格 或 详细 的 需求 ( 例如 ， 运 行 软件 的 最 低 要 求 )。 

在 营销 的 版 本 中 也 许 会 使 用 同样 的 文字 ， 但 是 可 能 会 打破 叙述 的 流程 。 这 些 
细节 通常 不 会 促进 产品 的 销售 ， 因 为 它们 是 些 简单 的 额外 信息 而 且 没 有 带 给 
访客 任何 好 处 的 内 容 。 您 可 以 通过 将 这 些 信息 移动 到 脚注 中 来 改善 文字 。 


宣传 文本 将 更 薄 ， 更 着 重 于 转换 。 同 时 ， 如 果 访 客 需 要 ， 他 们 仍 可 以 通过 阅 
读 脚 注 来 得 到 额外 的 信息 。 但 是 ， 请 确保 不 要 用 脚注 作恶 。 不 要 在 正文 中 盖 
明了 一 些 东 西 ， 而 在 脚注 中 违背 它 。 例 如 ， 把 实际 不 免费 的 东西 说 成 免费 。 
不 是 每 个 人 都 会 读 注 脚 ， 所 以 诚实 地 解释 一 切 是 最 好 的 选择 。 记 住 ， 不 要 其 
骗 访 客 或 给 他 们 不 正确 的 期 望 ， 那 将 最 终 导 致 访客 的 不 满 。 
























































































































































































































































































































































































































































































































































































































































Room for it all. 

Time Capsule is your one place for backing up everything. Its massive 500GB or 1T8 server-grade 
hard drive gives you all the capacity and safety you need. So whether you have 250 songs or 
250,000 songs to back up, room is the last thing you'll run out of. And considering all that storage 
and protection come packaged in a high-speed Wi-Fi base station starting at $299, data isn't the 
only thing you're saving. 





*1GB = 1 billion bytes and 1TB = 1 trillion bytes; actual formatted capacity less. 











图 


Apple 网 站 的 脚注 解释 了 存储 的 容量 


7.17 简化 注册 






































































































































注册 表单 是 访客 完成 转化 的 障碍 。 因 为 它 需 要 耗费 时 间 和 精力 ， 几 乎 没有 人 
喜欢 它们 。 注 册 表 单 很 可 能 是 你 转化 访客 的 最 后 阶段 ， 所 以 应 该 把 表单 做 得 
和 短小、 简单， 确保 在 这 个 阶段 损失 尽 可 能 少 的 访客 。 表 单 中 不 要 问 一 些 可 选 













































































的 信息 ， 他 们 可 以 在 稍 后 补充 。 保 持 表 单 的 轻巧 ， 减 少 访客 填写 的 痛苦 ， 加 
快 访客 填写 的 速度 。 将 额外 的 导航 和 内 容 信息 从 页 面 中 移 走 ， 只 保留 表单 也 
非常 有 用 。 这 样 就 没有 其 他 的 因素 干扰 访客 填写 表单 。 对 于 很 多 在 线 表单 ， 
访客 经 常 在 提交 后 才 发 觉 自己 所 犯 的 错误 。 他 们 被 导向 到 之 前 的 页 面 ， 重 

面 对 这 些 选项 和 列表 。 通 过 使 用 AJAX 动态 验证 用 户 的 输入 可 以 节省 用 户 险 
人 对 间 。 将 错误 信息 放 在 输入 框 的 右边 ， 一 旦 访客 犯错 ， 在 提交 之 前 他 就 可 以 
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为 销售 而 设计 一 提高 访客 转化 率 















is the dead simple place to post everything. just email us. 


Skip it! No setup or signup 


step 2. Email anything to post@posterous.com 
Attach photos, video, MP3's, and files 


step 3 See the site you made 
We reply instantly with your new posterous at 
http://yourname.posterous.com 





























Posterous 使 用 了 特别 的 方式 : 你 都 不 需要 注册 。 只 要 发 送 一 封 邮件 ， 就 可 以 创 
建 一 个 新 的 Blog。 



































7.18 总结 


我 们 已 经 了 解 有 效 销售 的 理论 ， 推销 解决 方案 而 非 产 品 ， 推 销 带 给 客户 益处 
而 非 产 品 功 能 。 我 们 也 已 经 了 解 AIDA 销售 理论 如 何 应 用 在 网 络 中 。 我 们 还 
了 解 了 促进 访客 转化 率 的 实际 技巧 。 


大 多 数 的 网 站 并 不 是 艺术 品 , 它们 并 不 仅仅 需要 美丽 得 让 人 惊叹 。 更 重要 的 ， 
它们 需要 完成 一 项 明确 的 任务 ， 例 如 向 访客 销售 产品 、 为 读者 展现 博客 。 网 
站 的 设计 应 该 为 它 的 目标 服务 。 当 然 ， 外 观 也 很 重要 ， 它 决定 了 访客 对 网 站 
的 第 一 印象 ， 但 是 同样 重要 的 是 ， 不 要 为 了 设计 而 让 网 站 走 入 歧途 。 
认真 思考 网 站 中 每 张 照片 的 作用 。 考 虑 是 否 经 过 特定 的 处 理 能 更 好 地 帮助 
你 的 网 站 。 网 站 设计 不 仅仅 只 针对 功能 ， 有 吸引 眼 球 同样 重要 ， 但 是 只 是 美 
FEAA 不 能 提升 网 站 的 表现 力 。 因 此 ， 设 计策 略 和 决策 都 是 由 网 站 








































































































































































































































































































































































































































































































































































































站 都 是 不 同 的， 都 服务 于 特定 的 客户 群体 ， 所 以 需要 不 断 地 微调 网 站 
和 战术 。 在 一 个 网 站 上 表现 良好 的 手段 在 另外 一 个 网 站 上 不 一 定好 。 
[确定 哪个 更 适合 自己 ? 测试 。 目 前 有 两 种 流行 的 测试 方法 可 以 帮助 
站 :A/B 测试 ( 也 成 为 分 割 测试 ) 和 A/B 测试 的 高 级 扩展 ,多 变量 测试 。 


A/B 测试 是 在 两 个 相对 的 页 面 上 测试 页 面 或 者 一 个 项 目 上 两 个 不 同 变量 表现 


















































































































































































































































718 BA 众 妙 之 门 














的 过 程 。 例 如 ， 如 果 你 想 试 试 两 个 触发 行动 的 页 面 哪个 更 好 。 每 个 访客 会 随 
机 访问 其 中 一 个 方案 ， 而 且 访客 的 转化 结果 被 记录 了 下 来 。 在 收集 了 足够 的 
数据 之 后 ， 通 过 数据 结果 就 能 找到 最 好 的 方案 。 


多 变量 测试 使 用 相同 的 原则 ， 但 是 允许 同时 测试 多 个 不 同 的 变量 。 例 如 ， 你 

想 测试 网 站 banner、 宣 传 语 或 者 市 场 广告 的 不 同 版 本 。 多 变量 测试 随机 为 

访客 提 共 一 个 测试 项 目 ， 记录 每 组 合 的 表现 。 
Zu 


尽管 多 变量 测试 听 起 来 非常 复杂 ， 但 是 我 们 可 以 通过 使 用 工具 来 简化 这 个 过 
Fo Google 的 Website Optimizer 是 颇 受 欢迎 的 工具 ， 可 以 进行 A/B 测试 和 
多 变量 测试 。 更 重要 的 是 ，Website Optimizer 是 免费 的 ， 也 就 是 说 每 个 人 都 
可 以 感受 这 两 种 优化 方法 的 优势 。 


了 解 这 些 理 论 和 实践 方法 只 是 开发 和 运营 卓越 网 站 的 一 个 方面 。 另 外 一 个 部 分 
是 测试 : 发 现 哪 些 方法 有 效 ， 哪 些 方法 无 效 ， 并 且 进 行 相应 的 调整 。 网 站 不 像 
报纸 ， 一 些 更 改 是 不 可 避免 的 。 你 的 网 站 不 会 保持 一 个 完成 的 状态 ， 为 提高 访 
客 的 转化 率 ， 网 站 需要 不 断 地 改善 和 适应 你 的 测试 和 优化 。 
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View: (€ Best 23 Combinations C Worst 23 Combinations Download: [T] [$3 &] | & Print | E Presiew 








Combination | Estimated Conversion Rate Range [?] ER p E IA E MENTI petes 
Original 3125:30* E - 0.41% - 125 / 401 
Combination 11 38.9%+31% HH (9.0% 85.496 24.9% 1607411 
Combinalion4 33.652309 E 768% 4.12% 7.74% 133/396 
Combination 23 33.4%+28% E 759% 2.82% 7.17% 1531458 
Combination 16 32.7%229% EEE 678% 1.56% 4.75% 144/44 
Combination 10 32.6%:29% EEE 675% 1.69% 4.87% 139/426 
Combination 8 32.4%229% E 646% 1.30% 3.90% 1371423 
Combination 22 32.053094 E 00% 1.03% 2.69% 129 1403 
Combination? 31.6%+28% E 551% 0.45% 1.27% 143/453 
Combination 14 31.4%:28% E 522% 0.41% 0.57% 137 1437 
Combination 21 31.1% 229% E 491% 0.40% 0.20% 126 1 405 
Combination 18 30.3%+28% E 31% 0.11% 2.79% 1301429 


Google 的 Website Optimizer. 
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Chris Spooner 











把 网 站 变 成 非凡 的 品牌 



































“不 同 凡响 ”意味 着 值得 关注 。 在 网 站 开发 领域 ， 这 意味 着 用 户 提起 网 站 或 
者 推荐 给 他 的 朋友 。 不 断 努力 将 你 的 站 点 打造 成 一 个 不 同 凡响 的 品牌 这样 

































































































































































































































































































































































户 会 自愿 地 信任 或 者 偏爱 你 的 网 站 ， 而 这 正 是 你 建立 和 开发 网 站 过 程 
意外 收获 。 
不 管 在 什么 行业 或 市 场 中 ， 总 是 存在 难以 计数 的 相似 的 网 站 。 众 多 的 网 
站 中 却 只 有 寥寥 几 个 能 够 不 断 发 展 并 获得 成 功 。 这 些 网 站 经 常 成 为 人 们 
谈话 的 话题 、 作 为 获取 信息 的 来 源 或 者 是 一 些 流行 产品 的 主页 。 考 虑 以 
-的 情况 ， 这 些 网 站 都 可 以 归 关 为 不 同 凡响 ， 那 么 它们 是 怎么 获得 这 样 




































































成 功 的 呢 ? 


章 中 汇集 了 大 量 对 运营 网 站 有 用 的 建议 和 意见 。 其 中 很 多 的 例子 是 基 了 
些 高 级 的 案例 ， 这 些 技术 可 以 用 在 不 同 水 平 的 网 站 中 。 不 管 你 是 运行 小 
小 的 个 人 博客 还 是 大 型 的 企业 网 站 ， 每 个 建议 背后 的 方法 将 帮助 你 把 网 名 
做 到 更 好 ， 做 到 更 有 名 气 ; 帮助 你 成 为 在 行业 或 者 市 场 同行 眼中 的 权威 ; 
帮助 你 运营 一 个 成 功 的 社区 ， 不 断 提高 流量 和 销售 额 。 最 重要 的 是 ， 计 你 
的 网 站 不 同 凡 响 。 别 忘 了 ， 仅 仅 是 应 用 这 些 技 巧 中 的 一 个 就 能 显著 地 改善 
网 站 ， 如 果 同 时 使 用 所 有 这 些 技巧 并 且 投 入 时 间 去 做 ， 你 的 梦想 最 终 会 成 
为 现实 。 
举例 来 说 ， 一 个 内 容 优秀 但 是 外 观 平平 的 网 站 一 定 会 成 为 不 同 凡响 的 品牌 ， 
同样 一 个 外 观 优秀 但 是 并 不 能 提供 顶级 内 容 的 网 站 也 可 以 在 一 定 程度 上 获得 
成 功 。 本 章 中 将 会 详细 分 析 这 些 例 子 的 缺点 ， 并 且 逐 步 进行 改进 ， 最 后 提升 
这 些 网 站 的 表现 。 


8.1 建立 独一无二 的 设计 


建立 代表 企业 、 产 品 或 者 服务 核心 价值 和 理念 的 视觉 标识 是 创立 任何 品牌 的 
第 一 步 。 通 常 都 会 从 设计 Logo 开始 ， 接 下 来 准备 宣传 推广 材料 ， 当 然 这 里 
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包括 网 站 。 要 建立 一 个 不 同 凡响 的 品牌 ， 设 计 应 当 独 一 无 二 ， 能 在 众多 同类 
网 站 中 脱颖而出 。 同 时 要 选择 一 些 专业 的 、 能 够 赢得 信誉 的 高 质量 图 片 。 独 
一 无 二 的 设计 能 够 让 人 眼前 一 亮 ， 而 不 会 同 平庸 的 设计 混淆 起 来 。 那 么 ， 怎 























么 样 设计 一 个 独一无二 的 网 避 


g? 











| http:/ /www.webdesignerwall.com/. 


3l fa» Google. 


+ Event, Freebies, WordPress 















place in downtown Toronto between May 8 - 10, 
2009. I have five tickets to giveaway. For your 
chance to win a free ticket, submit a comment in this post before May 4, 















Web Designer Wall 网 站 上 线 的 时 候 ， 
访客 的 注意 ， 现 在 这 个 网 站 仍然 非常 有 魅力 。 






































8.2 了 不 起 的 视觉 设计 


) * TUTORIALS 
Free Tickets to WordCamp Toronto (68) TUTORIS es 
Tm excited to announce that I will be speaking at ^T 
WordCamp Toronto 2009. I will talk about * HR e 
various ways to use WordPress and provide tips SX 
on how I setup my WordPress sites (this site, Best s * GENERAL 
Web Gallery, and IeonDock). The event will take EE gue 


: = 
| Add 和 > g Delicious Ñ Stumbleupon S Digg 
A Design Trends Event 
s oe ere Hash Freebies ulustrator 
APR Flash Gallery Techniques Inspiration Javascript 
16. 15 Unig (s Jobs Photoshop Tutorials 
Y At Best Web Gallery, I occasionally come across Review SEO Software 
good Flash sites. In this post, I want to feature the Talented People Updates 
best photographer sites (with amazing photos and > WordPress Writing 
galleries) that I've stumbled upon. Here are 15 
sites that demonstrate excellent use of Flash Ads 
technology to create beautiful photo galleries. PSD2HTML.COM v 
Bookmark this page now if you like commercial 
photography or need to find inspiration to create your own Flash gallery. 
Add fo^ ql Delicious {Stumbleupon S Digg 
m| A E Ea 
: (158 4 


依靠 吸引 人 的 内 容 以 及 设计 4 





















童 刘 人 
感 ， 赢 得 众 
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IIXERJIBS 
c 素 以 及 对 细节 的 关注 ， 


lo TERY 

















使 得 网 























博客 Web Designer Wall 在 网 站 的 背景 中 使 
使 用 大 花 设计 ， 同 时 使 系列 精心 设计 的 元 

站 不 同 凡响 ， 而 且 很 容 被 识别 并 被 视 为 是 创新 的 源泉 。 
8.2.1 ”注重 普遍 的 设计 原则 

Black Estate Vineyard 网 站 使 用 了 很 少 的 颜色 ， 也 没 
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装饰 的 设计 元 素 ， 但 


fri 


















































为 其 注重 结构 、 网 格 布局 的 设计 以 及 完美 的 字体 仍 为 它 赢得 了 广泛 的 赞誉 。 
可 归 基 本 的 方法 让 它 在 众多 有 影响 力 和 排名 靠 前 的 网 站 设计 中 脱 颗 而 出 ， 网 
站 拥有 了 与 主题 相符 的 复杂 、 成 熟 的 特性 。 















































































































































eoo Black Estate Vineyard - Omni Waipara. New Zealand Wine E 
fa [a |] d hap://blackestateconz/ c C [4] 
YouTube Wikipedia News (78)* Popular” 








Omihi Waipara 
New Zealand Wine 


Black 


Black Estate is a remarkable 
place for wine. 















































BJA Silverback 网 站 页 面 中 只 包含 了 一 个 电子 邮件 的 注册 区 域 ， 它 仍然 非常 
引 人 注 目 。 这 是 网 站 突出 的 视差 效果 造成 的 ， 这 种 技巧 在 其 他 的 网 站 中 还 从 
来 没有 出 现 过 。 就 是 这 一 单独 的 特性 吸引 了 大 量 访客 的 注意 ， 它 帮助 Silver- 
back 在 应 用 发 布 之 前 就 赚 了 足够 的 声誉 。 
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关键 技巧 
创建 行业 或 者 市 场 中 独一无二 的 设计 。 
在 所 有 在 线 设 计 中 使 用 你 选择 的 Logo， 传 递 同 样 的 信息 和 样式 。 
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设计 众 妙 之 门 





。 注重 细节 ， 进 行 高 质量 的 设计 。 
。 不 要 挤 进 用 得 滥 俗 的 湖 流 或 者 趋势 中 。 









Eg i Google D 
m" | 


© 
Silverback 
Spontaneous, unobtrusive 
usability testing software for 
designers and developers. 
> Capture screen activity 
> Video the participant's reactions 
2 Record the participant's voice 
D. Add chapter markers on the fly 










2 Control recording with the remote 
D. Export to Quicktime 


Purchase $49 


Silverback requires 
Mac OS X (10.4 or 10.5) 


What does Silverback do? 



























































Silverbak 网 站 背景 中 的 插画 效果 吸引 了 很 多 人 的 注意 ， 让 网 站 看 起 来 与 众 不 同 。 


8.2.3 ”提供 有 趣 又 有 用 的 内 容 

网 站 的 设计 给 了 用 户 第 一 印象 ， 但 是 内 容 是 在 一 个 很 长 的 时 期 内 构建 这 个 
品牌 。 内 容 包括 企业 为 了 宣传 产品 或 服务 而 在 宣传 页 面 中 提供 的 资源 ， 例 
如 博客 中 的 内 容 。 值 得 信赖 的 高 质量 内 容 将 最 终 为 品牌 赢得 尊重 ， 怎 么 做 
才能 提供 优秀 的 内 容 呢 ? 



























































































































































































































































提供 有 用 的 信息 

专业 的 博客 连续 不 断 地 发 布 非常 有 用 的 信息 ， 用 户 也 能 够 从 中 学 习 和 有 
所 收益 。 这 些 内 容 紧 接着 就 会 被 到 处 转发 ， 并 且 在 社交 媒介 中 得 到 推荐 。 
拥有 了 高 质量 的 内 容 ， 网 站 作为 专业 信息 来 源 就 成 为 了 一 个 不 同 凡响 的 


品牌 。 
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把 网 站 变 成 非凡 的 品牌 





提供 人 们 希望 使 用 的 
37Signals 是 一 系列 必 不 可 少 的 小 型 商业 应 用 和 合作 软件 的 开发 者 。 高 质量 的 
产品 帮助 网 站 树立 了 高 水 准 的 品牌 。 不 管 你 的 网 站 是 宣传 产品 、 公 司 或 者 服 

















































































































































































































务 ， 必 须 能 够 提供 专业 级 的 内 容 来 逐渐 制造 话题 和 培养 一 批 尊重 你 的 内 容 的 
成 为 所 在 领域 的 专家 





DR 


通过 提供 Wine Library 方面 的 高 质量 的 内 容 ，Gary Vaynerchuk 已 经 成 为 该 领域 的 
专家 。 专 业 的 内 容 不 断 增强 作者 的 权威 形象 ， 反 过 来 促进 了 公司 或 者 网 站 成 为 
一 个 不 同 凡响 的 品牌 。 












































































































































Recently at the Blog 





























专业 博客 作者 Darren Rowse 通过 不 断 地 产生 高 度 可 用 的 内 容 ， 已 经 成 为 了 一 

著名 的 品牌 。 

关键 提示 
。 提供 能 帮助 用 户 解决 问题 的 原创 内 容 ， 提 供 建议 或 教程 。 
向 成 功 者 学 习 并 且 不 断 深入 : 找到 一 个 有 用 的 观点 ， 然 后 在 此 基础 上 
ATTRA 

。 不 要 以 赚钱 为 首要 目的 ， 否 则 你 网 站 的 内 容 会 缺乏 质量 保证 。 





















































众 妙 之 门 





。 不 要 经 常 宣传 自己 。 把 精力 放 在 帮助 他 人 上 ， 你 会 得 到 回报 。 
。 别 放弃 ,生产 高 质量 的 内 容 需 要 时 间 和 耐心 , 特别 是 刚 开 始 的 时 候 。 













eoo Simple smali business software collaboration, CRM: 37sianals = 国 














37signals tye 


37signals 11« 


A Better Way 
To Work. 





Highrise 


Manage Your Projects Track Your Contacts 





Basecamp 





"One of the Net's rising stars." -TIME L 
"Reader's Choice.” — METE & » { | 





More praise from the press Backpack Campfire 
Organize Your Business Chat with Your Group 


HEAR WHAT OUR CUSTOMERS HAVE TO SAY Every day the world's most respected brands, small 


businesses, non-profits, and entrepreneurs depend 
on our products to make their businesses run 
smoothly. Safe, secure, and reliable. Since 2004. 
ABOUT 37SIGNALS 
We believe most software is too ‘Apr ag [Case study] equ 
many features, too "Bat msn BI Bh ck SC White” to 








complex. Too 
many promises. Instead, we build ie fe using Bases 


37Signals 提供 了 一 系列 优秀 的 应 用 程序 ， 这 正 是 其 粉丝 众多 的 原 


8.2.4 解释 新 概念 
令 网 站 脱颖而出 的 一 个 最 好 的 办 法 就 是 做 一 些 完 全 与 众 不同 的 事情 。 那 
些 使 用 新 媒体 来 向 用 户 传递 信息 的 网 站 显然 对 用 户 产 生 了 巨大 的 影响 。 
视频 内 容 成 为 一 个 可 以 将 网 站 所 有 者 从 传统 的 、 基 于 文本 的 网 络 互 动 
解脱 出 来 的 工具 。 那 些 应 用 视频 作为 信息 或 者 娱乐 目的 网 站 很 好 地 发 
和 扩展 了 他 们 的 品牌 。 下 面 我 们 些 例 子 ， 来 了 解 新 媒体 是 如 何 让 


5 受益 的 。 
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把 网 站 变 成 非凡 的 品牌 





eoo Wine Library TV: Gary Vaynerchuk's daily wine video blog. 3-] 
inelibrary.com] ES ¢ | ar Google 














Schwag — WL Network 


Hotel Wine Search in San Diego - Episode #664 


April 23, 2009 


TN 
tres 


(f mnes E 


What's Hot! 


f] MITV Farahani Fan Page 


Gary's Monthly Wine Club 


Fallow Me 





cary vayrernuk connues nis quest to tnd great wnes at a hotel. today he mes a Merot and a cabemet | @ Wor! mth cay 
Sauvignon and see's how they stack up. 


Having trouble viewing this video? Try the Quicktime version. 


Comments on this episode(156) Leave a comment > 


= "So nice to be able to hear you again. These Chilean wines can not be u..." by NZ Dennis 
"Another great hotel episode! Usually | scroll through the comments, bu..." by Miguel Cavalcanti E 
View all 156 > ppr 


fv p 
"Click Here 


Wines tasted in this episode: 





a lay 
4 2006 coppola viamona Meriot L 
À 2007 oot: Cabernet Sauvignon ry] T 


















































Wine Library 通过 展示 独一无二 的 视频 内 容 向 用 户 传达 了 其 作为 在 线 wine library 
领域 权威 的 信 /EE\O 




















添加 自己 的 理解 

My Damn Channel 是 一 个 允许 喜剧 演员 、 音 乐 家 或 者 电影 制 
列 视频 的 娱乐 工作 室 。 "You Suck at Photoshop” 系 列 使 用 常见 的 屏幕 截 
式 教程 视频 讲述 了 作者 Donnie Hoyle 十 分 有 趣 的 生活 。 和 凭借 独一无二 
的 视频 以 及 有 用 的 提示 和 技巧 ， 网 站 获得 了 巨大 的 成 功 ，3 也 的 视 
频 也 迅猛 地 人 播 开 来 ， 并 且 最 终 帮 助 My Damn Channel 获得 了 12 项 网 络 
大 奖 。 
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1 http://www.mydamnchannel.com/about.aspxo 
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WI © TA Sniny a Fodenst? 


TNNVID. — 


Starting a Podcast? 


Fast, Easy Way to Get Started 


nu 


Voices.com 


CAPTAIN’S-BLOG 
p N 


THE i^. ED 





紧 追 流行 文化 

The Onion Network 是 一 个 基于 当前 热点 话题 即时 发 布 虚拟 新 bP 
些 表 面 上 看 起 来 现实 、 严 肃 的 视频 ， 其 内 容 其 实 充 满 了 讽刺 。 这 些 创新 的 内 
5 作为 娱乐 之 源 越 来 越 受 欢迎 ， 从 而 成 为 了 一 道 亮丽 的 风景 。 
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容 让 网 











提供 与 流行 话题 相关 的 娱乐 信息 

Kevin Rose 和 Alex Albercht 合作 举办 的 Diggnation 口头 讨论 来 自 网 上 的 新 闻 和 最 热 
的 技术 话题 。 这 种 轻松 的 表演 方式 提供 了 一 种 有 趣 的 传递 信息 的 渠道 ，# 
头 的 交谈 和 随机 的 话题 也 带 来 了 娱乐 价值 。 基 于 个 人 的 理解 让 这 个 节目 从 其 他 
众多 的 技术 新 闻 网 站 中 脱颖而出 ， 让 人 觉得 非常 特别 ， 并 且 得 到 了 足够 的 上 曝光， 


有 了 众多 的 追随 者 。 
关键 提示 
讨论 网 络 上 热门 的 概念 ， 比 如 TV 风格 的 系列 叙事 方式 。 

超越 传统 的 博客 内 容 格 式 来 创建 独特 的 内 容 : 视 频 、 音 频 以 及 更 多 选择 。 
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把 网 站 变 成 非凡 的 品牌 





。 增加 个 人 的 意见 ， 同 竞争 者 进行 区 分 。 
。 紧 追 流行 文化 来 追随 细 分 市 场 。 





ins Spelling Ree | The Onion ~ America’s Finest News Source 




















PLAYLISTS 








The Onion Network 不 断 发 布 现实 播报 风格 的 视频 来 评论 流行 文化 和 当前 热点 。 


8.3 成 为 社区 的 一 部 分 


任何 品牌 周围 都 会 围绕 一 批 人 ， 他 们 形成 了 社区 。 这 些 人 可 能 是 公司 、 产 
品 或 者 服务 的 忠实 追随 者 ， 也 可 能 是 普通 的 用 户 。 社 区 是 所 有 品牌 最 有 价 
社区 中 人 们 可 以 分 享 他 们 的 意见 或 赞美 ,可 以 播 你 的 品牌 。 
当然 ， 那 些 期 望 没有 得 到 满足 的 用 户 也 可 能 很 容易 地 将 公司 、 产 品 或 者 有 
务 的 负面 消息 说 出 去 。 在 现实 世界 的 社区 中 ,利用 互联 网 和 社会 媒体 的 资源 
紧密 关注 品牌 周边 的 社区 动向 是 非常 重要 的 。 那 么 ， 品 牌 该 如 何 应 对 社 
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8.3.1 拥抱 社会 化 媒体 和 人 际 互 动 
十 会 化 标签 网 站 Delicious 监控 ^E Twitter 上 的 关于 其 服务 的 问题 、 意 见 和 
评论 ， 并 且 提 供 有 用 的 帮助 或 建议 。 这 种 直接 帮助 用 户 的 方式 在 公司 和 用 户 之 
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8.3.2 ”表现 得 友好 和 亲近 

Headscape 是 英国 伦敦 的 一 家 设计 公司 。 伴 随 着 他 们 的 设计 项 目 ， 同 时 还 
通 了 一 个 知名 的 网 页 设计 博客 和 一 个 广 受 欢迎 的 交流 博客 ， 公 司 成 员 在 上 五 
对 业界 的 众多 问题 提供 建议 和 技巧 ( 同时 还 有 一 些 来 自 也 

让 员工 一 露脸 就 能 让 用 户 更 了 解 他 们 的 性 格 特点 ， 并 且 在 公司 和 客户 之 间 建 
立 了 一 种 友好 的 关系 。 在 用 户 与 公 局 员工 接触 的 时 吴 能 有 这 样 的 优秀 体验 ， 
他 们 自然 会 同 公司 的 品牌 联系 起 来 。 


8.3.3 ”做 施 与 者 ， 而 不 是 掠夺 者 


Carsonified 的 创始 人 Ryan Carson， 就 是 因为 其 收集 的 大 量 高 质量 的 网 页 应 
而 成 功 。 在 一 次 采访 中 ， 他 归纳 了 创建 一 个 成 功 网 络 应 用 的 建议 。3 
个 就 是 让 用 户 很 容易 支付 下 个 月 的 费用 ， 例 如 将 账单 分 为 5 美元 、10 美 
元 或 者 20 美元 。 同 样 ， 如 果 用 户 遇 到 问题 ， 那 么 将 最 后 一 次 交易 的 费 
退还 给 他 可 以 让 用 户 立 刻 高 兴起 来 。 这 种 观点 被 认为 是 一 个 施 与 者 ， 而 不 
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ERA TURK, RCRA POS i RBS SCENA TRU AS o ARR 
的 态度 留 住 了 用 户 ， 并 且 良 好 的 口碑 会 在 用 户 之 间 口 口 相传 。 
关键 提示 





为 你 的 公司 、 产 品 或 者 服务 在 各 种 各 样 的 社交 网 站 和 博客 建立 账号 ， 
与 顾客 和 用 户 进行 直接 的 互动 。 


在 这 些 渠 道中 发 布 实用 的 信息 ,鼓励 用 户 参与 并 且 成 为 网 络 中 的 一 员 。 
当然 ， 别 忘 了 答谢 客户 以 建立 一 种 双向 的 沟通 


让 用 户 看 到 公司 内 部 ， 而 不 仅仅 是 通过 市 场 工具 。 
为 用 户 提供 有 效 、 快 速 的 帮助 ， 维 持 用 户 对 于 品牌 的 积极 态度 。 





http://boagworld.com/podcast/160-education-education-education。 
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[cP http:/ /boagworld.com/ 





archive about 


o o oaqwor.d veytting wen on boagword About Pau Maou nd the show 


forum search 
Help on every aspect of web design 


A podcast for those who design, QED 
develop or run websites Sermo 
Boagworld is the blog of Paul (the Wurzel) Boag who lives in the 
heart of rural Dorset. He produces a weekly podcast with Marcus 
(pop star) Lillington on all things relating to building and running. 
websites. They also run web design agency - Headscape, 


or get blog posts by amail and RSS 


o o clie 0 
178. bad blogging latest shows 


Posted In Podcast on: Wednesday, August 12, 2009 by Paul Boag 178. Bad Blogging 

On this week's show: We look at the harsh truths of corporate blogging, ate 

ask how luxury products can be sold online and discuss whether it is the Yat cf ennioris Bonos; ap FON MN 

role of a web designer to challenge a client's business model. rcu oz kA m c cm 
whether its the role ot a web designer to 


challenge a client's business modal 
Download this show. 


177. Back In business 
Launch our podcast player - 





176, Youth 


news 175. Collaboration 
the do's and don'ts of dark design 174, Twitterverse. 


"Users will spend considerably less time viewing a website with a dark background than one crim sten 

with a light background" ~ When you hear statements like that you may dismiss the idea of 

using a dark design. However in reality, | believe there are a place for dark designs, Dark 

designs can look elegant and extremely striking. And although not always appropriate, there. have your say 
are times when they are the right solution for a site. 







































































Headscape 支持 用 户 通 过 博客 、 播 客 或 者 独立 的 Twitter 账号 与 员工 Paul Boag 进 
行 互 动 ， 这 样 可 以 留 给 用 户 平易 近 人 的 好 印象 。 















































8.4 进入 人 们 的 头脑 中 


建立 品牌 的 一 个 豆 古 不 变 的 目标 就 是 让 用 户 想 到 一 个 特定 的 主题 时 ， 头 脑 
第 一 时 间 就 会 想起 这 个 品牌 。 要 成 为 一 个 不 同 凡响 的 品牌 ， 网 站 必须 想 方 设 
法 进入 用 户头 脑 中 并 且 潜 移 默 化 地 影响 用 户 的 选择 。 让 品牌 一 出 现 就 被 接受 
= AN 

是 = 


重要 的 步骤， 那么 如 何 做 到 呢 ? 
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[se ae Ec 四 


‘earsonified 


creativity with integrity 
Blog 


FOWD Slide Comp Voting Open 


haven't had the oppormuntty ro view all 


Ws hes rough bir we have picked auf 


FOWD Slide lath 

Competition lem Lek sour e Mud Gu M oV ar ic 

Update updutes by eral x» oppoded wo ganing chers 1n Your 
MS render 


Posted by Keir Whitaker on April 
1st, 2009 in FOWD 


We managed ro start quite a debate abaut our sie 
competion last week. If vou haven't read my 
‘original post check it out, For additional opinion 1 
recommend watching Paul Bosu's video response as 
well as Mark Boulton’s post on the mater. 


If you haven't already entered you 1...1 





























Carsonified 认为 给 用 户 一 些 免 费 的 体验 是 成 为 一 个 成 功 的 网 络 应 
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YAPSD2HTML 


YOU DESIGN 一 WE XHTML CONTACT US 


HOME ABOUT BLOG TESTIMONIALS EXAMPLES — CLIENTAREA 








WHAT WE DO 

We convert PSD to HTML. 4 
We convert your designs to high quality, cross-browser compatible valid DESIGN 

XHTMU CSS markup. > 

We can also implement your designs as skins / themes / templates for XHTML & MORE 


WordPress, Movable Type. Drupal, Joomia!, Pligg. Blogger, Shopify, X- 
Cart, CMS Made Simple, CubeCart and others. Explore all available 
options of PSD to HTML now! 


WHO WE ARE TRUSTED BY 








We are the world leader in the field. Founded in early 2005 M 
PSD2HTML.com was the first service of its kind. We have over 10,000 GE 
clients to date. e Microsoft ~ 
With over 450 full-time employees, we can ensure the highest quality for TOYOTA 
each and every project. Proof is in our ISO 9004:2000 quality 1 | 
certification. 
Leam more about PSD to HTML. OUR BLOG 
INTERNET EXPLORER 8 NOW Mar-23 
SUPPORTED 
OUR GUARANTEE As many of you already know, the latest version of 
We offer our cllents a 100% satisfaction guarantee and a strict non- Internet Explorer has just been released. It is the eighth 
disclosure policy. Read more. release - IEB. 
Read our blog 





























Home | OrderNow | Blog | Testimonials | Examples | Client Area $ " 

About | Pvacy | Money-back | Non disoloouro bee OED) 

© 2005-2009 PSD2HTML by Perflect Corporation eee 
XHIML1.0 | CSS21 | WCAG20 | SECTION 50S 
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他 的 网 站 或 





做 了 广告 宣传 。 


ou 


PSD2HTML 在 业内 上 
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8.4.1 广告 无 所 不 在 

PSD2HTML 公司 懂得 宣传 品牌 识别 的 好 处 。 它 的 横幅 广告 出 现在 大 量 的 广 受 
欢迎 或 者 高 质量 的 博客 中 ， 这 些 都 面向 它 的 目标 市 场 。 这 种 大 量 出 现 的 品牌 
名 称 和 标识 让 用 户 在 想 ai 家 专长 于 XHTML/CSS 转化 的 公司 时 首先 想到 
PSD2HTML。 


8.4.2 成 为 话题 人 物 
Clear Left 公司 的 Andy Budd 经 常 出 现在 各 种 采访 中 ， 并 且 在 众多 的 会 议 上 做 
过 网 页 设计 用 户 体验 的 主题 演讲 。 他 还 在 传统 出 版 物 、 会 议 、 博 客 和 Twitter 
上 发 起 了 一 系列 的 讨论 活动 。 这 就 让 他 和 他 的 公司 不 断 地 在 目标 市 场面 前 曝 
光 ， 结 果 就 是 ， 他 被 认为 是 这 个 领域 的 专家 。 
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做 一 些 与 宣传 公司 看 似 无 关 的 活动 对 建立 一 个 良好 的 品牌 形象 有 很 大 的 
帮助 。 帮 助 这 个 领域 中 有 才华 的 人 ， 支 持 一 些 教 育 项 目 ， 举 办 一 些 交流 
想法 的 会 议 都 是 很 好 的 方法 ， 这 些 无 私 的 活动 都 有 助 于 建立 一 个 不 同 凡 



























































响 的 品牌 。 


8.4.8 创建 “病毒 ”或 者 诱饵 式 内 容 

Common Craft 发 布 了 他 的 第 一 个 视频 “RSS in Plain English” 后 获得 大 量 

的 关注 。 一 天 之 内 ,Digg 首页 的 视频 就 被 浏览 了 15000 次 。 这 种 类 型 的 “ 病 

毒 ” 或 者 诱饵 式 内容 确 实 可 以 帮助 创造 大 量 的 曝光 ， 进 而 向 一 群 新 的 用 户 

介绍 你 的 工作 。 最 后 ， 这 些 额 外 的 关注 极 大 地 提高 了 Common Craft 的 

品牌 识别 。 

关键 提示 

。 在 目标 市 场 中 宣传 你 的 公司 、 产 品 或 者 服务 。 要 尽力 做 到 全 面 覆 盖 而 
不 是 提高 点 击 率 。 

。 参加 讨论 、 会 谈 或 者 一 切 能 增加 网 站 曝光 度 的 活动 。 

。 创建 那些 可 能 在 朋友 和 用 户 之 间 传 播 的 有 趣 、 有 用 的 话题 。 

。 确保 你 的 公司 、 产 品 或 者 服务 成 为 众人 讨论 的 话题 。 
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comnoncraft Craft Craft 


Home Our Work About Us Contact 





About This Blog Homo « vie: RSS in Pan Engiah 
We've been serving up fresh content Video: RSS in Plain English 
here since 2003, Lately we're most Ww eee n an eee 
) 


‘excited about making paperworks 
videos, our Video Store, and being E 











lightweight. 
Categories: exnlanation panenwoks nlinenalish rss show socialmedia videa 
Subscribe to Our Blog | Video: RSS In Plain English Need this for Work? 
EU Purchase view licensed versions here 
Enter your email address: 
B ss 
17896 readers | 
-U r Length: 03:52 
; Date Published: Apr 23 2007 
Cot Twitter? An Introduction to RSS as a way to save time 


@CommonCraft ~ New videos, reading web sites. Shared on YouTube, dotSUD. 

aid the scenes (translations) and Jeacheriube. Need a 
jeelefever ~ personal, links, etc. [Ug] | wanscriot? 

Gsachilefever - personal You 





We have a Twitter Page. 

















People Are Talking Share this Video! 
Here is the embed code if you'd like to share it, Click on the text below and copy to share. 

Check out the latest mentions on: 
«object type="application/x-shockwave-flash” height="260" width="320" 

en dataz "hnp-irww youtube comivOigsSxGsUAamp;relet"lde'VideaPlaybaric» <param 

ame«"movie"value"htpi/iwwyoutube.comM/ORaLsSxCsU&amprel-D» <param 

3 Blogs (Technorati) 

3) Bookmarks (Delicious) 822740 reads Emall this Vid 

*) Friend Feed 

Possibly Related s 

Dugg! E 
9 lent video: windows Submited by Rob Cottinaham on Api 23, 2007 - 11:09pm. 


到 了 来 


En 
SE 
y 
i 
a 
BL 
E 
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Common Craft 的 “The Rss in Plain Video" 42H 
八方 的 大 量 关注 。 


于 用 这 些 建议 或 技巧 ， 毫 无 疑问 可 以 将 你 的 网 站 建设 为 受 人 尊敬 的 品牌 。 但 


Se FH — NS 


CHE, PERAR, iXX LTENSSEBE—HBS5 AMM. XHARBSPS 


EXE 


容 充 满 信心 ， 帮 助 他 人 ， 传 播 你 的 看 法 ， 开 始 让 你 的 网 站 变 得 不 同 凡响 吧 ! 
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Steren Snell 
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许多 成 功 的 和 知名 的 设计 师 愿意 并 渴望 为 那些 希望 提高 的 人 提供 指导 。 为 了 获得 
一 些 共性 问题 的 答案 ， 我 们 向 一 流 的 设计 师 和 开发 者 提出 了 一 系列 的 问题 。 参 与 
者 这 来 了 大 量 不 同 的 专业 知识 和 技巧 ， 所 有 这 些 有 价值 的 见解 都 会 帮助 那些 渴望 
是 高 的 人 。 


认识 一 下 我 们 的 专家 组 成 员 


Dan Rubin (webgraph.com) 
































































































































Webgraph 创始 人 、 主 要 负责 人 、Sidebar Creative 联合 创始 人 





Jason Santa Maria (jasonsantamaria.com) 





` 一 — 


D IN, RE 





























Paul Boag (boagworld.com) 
Headscape 联合 创始 人 、 创 意 总 监 、Boagworld 创始 人 


Jeff Croft (blueflavor.com) 





Blue Flavor 设计 师 
Andy Budd (clearleft.com) 


联合 创始 人 、 用 户 体验 总 监 


























Collis Ta^ eed (envato.com) 








Envato 首席 执行 官 ( CEO ) 














Wolfgang Barthelme (bartelme.at) 


Bartelme Design 创始 人 





1 本 章 的 截屏 是 在 Flock 2.5 浏览 器 和 Windows Vista 系统 上 进行 的 。 
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Keith Robinson (blueflavor.com) 





Blue Flavor 主要 负责 人 人、 创意 总 监 





Chris Spooner (spoongraphics.co.uk, line25.com) 
币 和 博客 作者 
Jonathan Snook (snook.ca, sidebarcreative.com) 


设计 师 、 撰 稿 人 、 发 言 人 


设 讨 
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Tony Chester (onwired.com) 
OnWired 创始 人 和 运营 总 监 
Elliot Jay Stocks (elliotjaystocks.com) 


设计 师 、 撰 稿 人 、 发 言 人 


L 
































Khoi Vinh (subtraction.com) 
New York Times 设计 总 监 
Veerle Pieters (duoh.com) 


AISI. BREA, Duoh! 创始 人 























Chris Coyier (css-tricks.com) 


Chatman Design 和 CSS Tricks 网 页 设计 师 、 博 客 作 者 








Jay Hilgert (bittbox.com) 


Bittbox 的 设计 师 、 博 客 作者 











Dave Shea (mezzoblue.com) 











Bright Creative, CSS Zen Garden ( CSS 禅 意 花园 ) 创始 人 、Mezzoblue 创始 人 、 


设计 师 






































Darren Hoyt (darrenhoyt.com) 








ML 


自由 设计 师 
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Henry Jones (webdesignledger.com) 








Web Design Ledger 自由 设计 师 和 博客 作者 




















Liam McKay (wefunction.com) 























Function 设计 师 、 项 目 经 理 


Nathan Smith (fellowshiptech.com) 





























Fellowship Technologies 用 户 体验 工程 师 、Sonspring 创始 人 











Nick La (ndesign-studio.com, webdesignerwall.com) 


N. Design Studio 创始 人 、 博 客 作者 





Larissa Meek (agencynet.com) 








AgencyNet 助理 创意 总 监 

















Jon Hicks (hicksdesign.co.uk) 





Hicksdesign 设计 师 


9.1 设计 和 开发 


9.1.1 关于 网 站 设计 开发 最 常见 的 曲解 或 误解 是 什么 ? 

Dan Rubin :“ 作 为 一 种 媒体 ， 网 站 设计 有 些 独 特 的 东西 "。“ 解 决 网 站 问题 与 
以 往 其 他 事情 相 比 更 需要 截然 不 同 的 思考 方式 "。 以 上 根本 不 是 事实 ， 尤 其 
对 设计 者 而 言 。 视 觉 设 计 的 基本 原理 对 那些 需要 在 屏幕 上 展现 的 设计 同样 有 
效 。 图 层 交 互 设计 、 信 息 架 构 和 其 他 特定 媒体 领域 都 是 与 媒体 相关 的 专 :| 
就 如 同 建筑 知识 可 能 与 环境 图 形 设计 相关 ， 或 者 从 材料 的 角度 看 ， 印 刷 和 ; 
订 的 知识 与 包装 设计 相关 。 一 个 设计 者 对 此 理解 得 越 早 ， 就 越 能 熟练 地 把 
站 界面 设计 所 需 的 多 个 层面 的 知识 结合 。 
Jay Hilgert ;我 最 常 遇 到 的 误解 是 客户 的 认识 。 我 遇 到 的 90% 的 客户 低估 了 
制作 一 个 网 站 的 工作 量 。 仅 仅 向 设计 师 支 付费 用 是 不 够 的 。 整 体 的 设计 依赖 
于 客户 希望 传达 的 内 容 和 信息 ， 大 多 数 客户 没有 意识 到 他 们 为 此 要 进行 多 少 
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思考 。 为 客户 主页 设计 的 一 段 文字 ， 你 需要 等 上 三 个 星期 ,这 也 许 让 人 难以 


B fii 1 这 却 经 常 发 生 o 

























































































Wolfgang Bartelme :我 猜 通常 大 多 数 误解 是 一 个 设计 ， 我 指 的 是 网 站 设计 ， 
能 够 一 步 到 位 。 其 实 ， 这 是 一 个 渐进 的 过 程 。 
Keith Robinson : 如 果 要 获得 成 功 ,对 工具 ( CSS 和 HTML 等 ) 的 精通 是 必须 的 。 
我 觉得 年 轻 的 网 站 设计 师 ( 和 开发 者 ) 的 最 大 问题 是 狭隘 地 专注 于 工具 ， 而 
不 是 去 深入 理解 媒体 。 我 认为 知道 如 何 写 HTML 和 CSSs, 以 及 对 其 他 技术 ( Flash 
和 JavaScript 等 ) 有 一 个 扎实 的 理解 很 重要 ， 但 是 对 与 技术 和 工具 无 关 的 技 
巧 的 理解 也 同样 重要 。 比 如 ， 知 道 css 如何 工作 固然 是 好 的 ， 但 是 这 不 能 代 
替 对 扎实 的 设计 和 可 用 性 基础 知识 的 理解 。 同 样 ， 掌 握 人 际 关系 、 时 间 管 理 
等 技能 也 是 同样 是 重要 的 。 


9.1.2 ”你 们 发 现 其 他 设计 者 常 犯 的 可 用 性 错误 是 什么 ?在 设计 网 
站 时 ， 可 用 性 的 哪些 重要 特点 是 必须 考虑 但 却 常 被 遗忘 的 ? 


Jonathan Snook : 我 发 现 设计 者 最 常 犯 的 可 用 性 错误 是 出 于 美学 的 考虑 使 设 
计 变 得 过 于 精致 : 链接 或 按钮 变 得 不 明显 或 者 被 隐藏 起 来 ， 或 元 素 靠 得 太 近 。 






























































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































需要 知道 他 们 点 击 的 是 什么 以 及 他 们 为 什么 要 点 击 它 。 否 则 ， 他 们 将 忽 
Mrs 
H Go 
Tony Chester :我 发 现 设 计 者 经 常 使 用 精 糕 的 导航 拼凑 网 站 。 是 的 ， 网 站 可 
A EE, 1 EAN 8E HARA 代价 。 是 的 ， 你 可 以 使 3 ABS 里 系统 ， 
只 要 它 不 迫使 你 使 用 愚蠢 的 页 面 流 。 导 航 是 至 关 重 要 的 ， 尤 其 当 网 站 的 主要 
的 是 卖 东 西 、 分 享 知 识 或 收集 用 户 信息 时 。 如 果 网 站 不 能 轻易 满足 的 
标 ， 他 们 将 会 离开 ， 而 不 管 网 站 看 上 去 是 什么 样 。 
除了 这 个 ， 我 发 现 太 多 设计 者 试图 通过 Flash 和 JQuery 来 使 网 站 变 酷 ， 而 























这 只 会 使 网 站 变 得 难以 使 用 。 我 讨厌 因 我 的 鼠标 动作 不 够 精确 而 立刻 消失 
的 动态 菜单 。 因 此 要 为 人 们 提供 较 大 的 可 点 击 区 域 ， 给 他 们 的 错误 留 一 些 
余 
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DHT OP 
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个 由 Flash 构成 的 创意 菜单 。 


9.1.3 ”你 们 怎么 看 CSS 框架 ? 你 们 是 否认 为 设计 师 或 开发 者 应 
该 使 用 一 个 现成 的 框架 ， 或 者 用 他 们 自己 的 框架 ， 或 者 完全 不 用 
任何 框架 ? 

Elliot Jay Stocks ， 我 不 使 用 任何 现成 的 css 框架 ， 因 为 我 更 倾向 于 用 我 自己 
的 方式 工作 。 所 以 ,我 有 我 自己 的 框架 , 它 包含 了 CSS、HTML 和 一 些 PHP 代码 。 
我 也 使 用 我 发 布 的 免费 的 WordPress 主题 “Starkers” 作 为 起 点 ， 所 以 我 猜 
你 可 能 会 说 某 种 意义 上 那 也 是 一 种 框架 。 总 体 来 说 ， 我 认为 采用 框架 ， 万 
你 自己 的 框架 ， 是 个 很 好 的 主意 ， 因 为 它们 会 大 大 加 速 开 发 过 程 。 如 果 你 
要 经 常 完成 某 种 任务 ( 上 ， 这 是 很 难 避 免 的 )， 使 用 一 种 框架 会 为 你 带 
来 好 处 ， 因 为 不 用 自己 重复 开发 。 
Khoi Vinh : 坦白 地 说 ， 我 并 不 在 乎 。 如 果 你 是 一 个 充满 激情 、 礁 心 勃 勃 的 
设计 者 或 开发 者 ， 对 我 而 言 ， 你 是 否 使 用 框架 一 点 也 不 重要 ， 只 要 最 终 的 产 
品 与 设计 精神 相符 并 能 满足 用 户 的 目标 和 需求 。 只 要 你 不 用 Dreamweaver, 
对 我 而 言 就 没什么 问题 。 
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Chris Coyier : 如 果 你 因为 不 理解 如 何 实现 你 正在 寻找 的 某 种 布局 ， 而 考虑 使 
CSS 框架 , 那 你 最 好 还 是 不 要 使 用 CSS 框架 。 CSS 只 是 一 种 简单 的 语言 。 
重 写 它 不 会 如 此 费力 以 至 于 你 必须 进行 一 些 抽 象 才 可 以 使 用 ( 比如 Ruby on 
Rails 中 的 Rails 框架 )。 
























































































































































































































































































































































CSS 框架 当然 有 它们 的 用 途 ， 这 个 已 经 说 过 了 。 考 虑 一 下 一 个 充满 网 格 、 报 
纸 类 型 的 网 站 。 每 天 都 需要 新 的 布局 来 使 内 容 看 上 去 更 合理 。 维 护 这 些 网 站 
的 设计 者 需要 的 是 不 同 的 选择 和 不 同 的 可 能 性 ， 而 不 是 限制 。 可 以 确定 这 些 
类 型 的 网 站 在 使 用 某 种 框架 ， 使 之 成 为 可 能 。 他 们 在 使 用 #home、.subCol 



















































































umn-3、divfirst 和 .columnGroupB 这 类 该 死 的 语义 符号 。 
如 果 你 处 在 这 样 情况 下 ， 创 建 你 自己 框架 确实 很 有 可 能 ， 但 是 在 你 开始 投入 
工作 之 前 ， 你 应 该 好 好 了 解 一 下 那些 流行 的 和 久 经 若 验 的 框架 。 对 于 入 门 者 
而 言 ， 我 推荐 Blueprint, 960 FA YUI grids, 



















































































































































































































































































































































































Dave Shea : 我 发 现 使 用 框架 的 两 个 主要 好 处 。 一 是 为 网 站 编码 时 只 需要 较 
少 的 前 端 工作 ， 二 是 较 少 的 跨 浏览 器 问题 。 对 于 前 一 点 ， 多 年 来 我 自己 开发 
了 多 种 框架 ， 它 们 在 开始 新 项 目 时 可 以 减少 工作 量 。 对 于 后 一 点 ， 我 已 经 太 
熟悉 IE 的 怪癖 ， 这 些 怪癖 当时 花费 了 我 大 量 的 调试 时 间 。 






































对 尝试 第 三 方 构 架 ， 比 如 Blueprint, 960 E YUI, R- [S AS EK TE Xo 
我 之 所 以 这 样 认为 ， 是 因为 我 自己 为 网 站 写 了 多 年 代码 ， 为 了 达到 布局 的 
要 求 ， 我 去 研究 某 个 框架 所 需 的 时 间 将 等 于 或 大 于 我 自己 编码 需要 的 时 间 。 
这 并 不 是 说 这 些 框 架 对 其 他 人 也 没 用 。 我 确信 它们 将 帮助 一 些 人 提高 开发 
速度 ， 并 帮助 初学 者 更 容易 地 编写 CSS 布局 代码 。 但 是 对 我 而 言 ， 框 架 不 
















































































































































































































































































9.1.4 你们 认为 设计 者 和 开发 者 在 搜索 引擎 优化 中 的 职责 是 什么 ? 
Darren Hoyt : 如 果 你 收取 有 竞争 力 的 费用 ， 你 应 该 用 符合 逻辑 和 语义 的 
HTML 构建 你 的 网 站 ， 这 将 是 客户 包含 关键 字 的 内 容 的 补充 。 在 理想 状态 下 ， 
尔 正在 使 用 的 CMS 应 该 生成 描述 性 的 URL。 这 些 事情 中 的 每 一 件 都 会 吸引 
搜索 引 警 。 这 不 应 该 时 额外 的 zy o 年 我 SK, 这 应 该 是 标准 。 
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在 浏览 器 中 工作 的 YAML 在 线 网 格 生成 器 。 


在 开发 者 进行 优化 的 “责任 ”范围 内 ， 所 作 的 一 切 都 取决 于 合同 中 的 规定 。 
在 网 站 上 线 前 ， 我 会 对 客户 解释 ， 在 编写 优秀 的 代码 之 外 ， 我 不 能 确保 获得 
绝 佳 的 搜索 引擎 排名 。 我 鼓励 他 们 仔细 思考 他 们 上 传 的 内 容 和 他 们 在 与 哪些 
人 交换 链接 ， 因 为 在 Google 看 来 ， 这 是 唯一 能 够 为 他 们 带 来 诚实 区 
的 东西 。 


从 个 人 的 角 Ss 1T ^ Bus 我 从 来 不 把 [s 定义 成 SEO Xo 我 Bi [t] J 
把 他 们 描绘 成 在 提高 排名 方面 具有 经 验 的 人 。 但 我 不 是 指 那些 靠 通 过 不 道德 
的 方法 欺骗 Google 或 依靠 无 效 或 过 时 的 方法 的 人 。 


发 者 在 SEO 中 的 角色 至 关 重 要 。” 
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Tony Chester: 开发 者 在 SEO 中 的 角色 至 关 重 要 。 清 上 晰 的 、 符 合 标准 的 代码 
将 会 为 排名 带 来 奇迹 。 当 Google 的 机 器 人 到 达 你 的 网 站 的 时 候 ， 它 不 想 在 
[用 的 表格 、 过 时 的 字体 标记 和 不 连贯 的 代码 间 浪 费时 间 。 它 只 要 一 件 东 
一 一 内 容 。 这 也 是 开发 者 的 切入 点 。 为 机 器 人 提供 它 迫 切 需 要 的 内 容 是 3 
键 。 些 人 会 做 清晰 的 标记 和 创建 分 层次 的 内 容 。 有 的 人 会 为 你 创建 SEO 
友好 的 URL， 并 创建 Google 深 爱 的 XML 格式 的 站 点 地 图 。 没 有 合理 构建 的 
网 站 ，SEO 将 是 一 种 挑战 。 













































































































































































































































































































































































9.2 设计 过 程 众 妙 之 门 















































Henry Jones : SEO 可 以 分 为 两 类 站 外 的 和 站 内 的 。 站 外 的 SEO 基本 上 是 
指 指向 本 网 站 的 链接 数量 。 开 发 者 对 这 一 点 没有 太 大 的 控制 力 。 但 是 站 内 的 
SEO 包括 使 用 正确 的 HTML 标签 、 创 建 坚固 的 网 站 结构 、 良 好 地 使 用 内 部 链接 ， 
以 及 对 搜索 引擎 一 般 工 作 原 理 的 理解 ， 开 发 者 应 该 对 所 有 的 这 些 引 


9.2 ”设计 过 程 


9.2.1 ” 当 为 某 个 客户 开发 一 个 项 目 时 ， 你 们 第 一 步 将 做 什么 ? 
Darren Hoyt: 在 项 目 启动 会 议 上 ， 我 会 党 试 通过 解释 为 什么 要 把 访客 放 在 
第 一 位 考虑 来 确定 基调 。 这 很 快 会 减少 客户 的 古怪 念头 ， 以 防止 个 人 的 审美 
癖 好 破坏 设计 过 程 ， 这 也 会 使 客户 确信 我 作为 一 个 设计 师 ， 不 是 在 为 自己 的 
利益 设计 一 个 作品 。 我 们 双方 需要 协同 工作 ， 来 为 访客 创造 最 佳 的 体验 。 
如 果 客 户 还 没有 考虑 过 访客 ， 我 们 会 预算 出 一 些 时 间 ， 研 究 行业 竞争 、 做 标 
注 和 模型 、 更 加 清晰 地 描绘 设计 所 面 对 的 访客 的 特征 。 


在 开启 动 会 议 时 ， 其 他 一 些 需要 获得 共识 的 事情 。 


1. 理想 状态 下 ， 客 户 应 该 至 多 只 提供 一 个 联系 人 。 可 以 理解 ， 这 个 人 会 从 
合作 者 和 他 们 的 上 级 那里 收集 反馈 ， 但 是 不 要 人 允许 更 多 的 人 通过 电话 或 
了 件 进 行 反馈 并 给 出 相互 矛盾 的 意见 。 
2. WRK Basecamp 这 样 的 系统 被 用 于 追踪 里 程 碑 事件 ， 有 必要 对 项 目 计 划 
做 一 个 整体 回顾 。 即 使 时 间 发 生变 化 ， 对 客户 而 言 它 也 是 一 个 可 视 化 的 
提醒 标识 ， 提 醒 我 们 将 会 按 一 个 常规 的 计划 一 同 工 作 。 
3. 在 这 一 点 上 ， 如 果 设 计 工作 期 间 中 有 任何 假期 或 空 档 ， 应 该 及 早 提出 来 。 
我 提醒 客户 ， 搭 建 一 个 网 站 是 双向 的 ， 需 要 双方 持续 投入 。 有 了 时候， 这 
会 把 客户 吓 跑 ， 但 是 直接 了 解 客户 是 否 会 履行 他 们 在 交易 中 应 该 承担 的 
义务 是 有 好 处 的 。 
4. 为 了 进行 预算 ， 应 该 确定 一 个 版 面 设计 的 过 程 。 有 些 客户 想 要 看 到 3 个 
不 同 版 本 的 主页 ， 而 有 一 些 会 要 求 唯一 的 主页 和 多 个 不 同 的 内 部 页 面 。 
一 些 项 目 依 赖 于 一 个 预 估价 格 ， 一 些 则 是 固定 价格 。 这 取决 于 项 目 ， 没 
有 什么 可 以 大 惊 小 怪 的 。 
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向 专家 学 习 名 家 访谈 与 真知 灼 见 



































5. 总 之 ， 内 容 材料 应 该 在 版 面 设计 之 前 提交 。 提 醒 客 户 ， 如 果 设 计 师 在 没 
自得 到 正确 信息 之 前 就 开始 版 面 设计 ， 这 个 令 他 们 花费 不 菲 的 网 站 将 会 

大 大 受 损 。 很 快 设计 将 仅仅 变 成 装饰 。 
Jason Santa Maria: 我 总 是 从 跟 客户 谈 他 们 想 要 达到 的 目标 开始 ， 如 果 可 以 ， 
我 会 和 他 们 的 网 站 访客 或 用 户 交 谈 。 每 个 项 台 时 都 要 进行 调查 和 探索 ， 
所 以 我 能 在 信息 充足 的 情况 下 做 决定 。 


Chris Coyier : 确定 目标 是 理想 的 开始 方式 。 跳 过 这 一 步 ， 直 接 开 始 设 讨 
如 此 具有 诱惑 力 。 你 可 以 跨越 式 地 搭建 一 个 漂亮 的 网 站 ， 但 是 美观 对 销 人 


品 、 使 访客 获得 资讯 、 构 建 社区 或 达成 其 他 客户 想 要 真正 达成 的 目标 ， 
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一 定 
挑战 在 于 客户 也 许 不 能 清楚 地 表达 他 们 的 目标 。 作 为 设计 师 ， 作 为 在 建设 网 
站 方面 富有 经 验 的 人 ， 我 们 需要 帮助 他 们 描绘 出 那些 目标 。 如 果 你 做 了 这 
点 ， 并 且 完 成 和 超越 了 那些 目标 ， 你 的 客户 将 会 乐 不 可 文 。 


9.2.2 ”在 你 们 把 草图 或 原型 转化 成 一 个 实际 的 网 站 时 ， 遇 到 的 主 
要 挑战 是 什么 ， 你 们 如 何 克 服 它们 ? 
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经 过 重新 设计 的 Smashing Magazine 版 式 。 


Liam McKay : 对 我 而 言 ， 最 大 的 挑战 是 限制 我 所 做 的 事情 并 专注 于 那些 必须 
的 事情 。 我 并 不 会 因为 缺乏 创意 而 纠结 。 正 相反 ， 在 构建 原型 的 过 程 中 ， 我 
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的 思想 会 走 得 太 远 ， 我 想到 了 太 多 该 包含 进来 的 东西 ， 这 使 设计 面临 不 堪 重 
负 的 危险 。 令 我 较 难 处 理 的 是 ， 分 辨 出 哪些 想法 是 实际 需要 的 ， 哪 些 只 不 过 
是 头脑 过 于 兴奋 的 产物 。 我 做 的 项 目 越 多 ， 在 构思 过 程 中 发 现 哪些 是 实际 需 
求 的 好 处 就 越 明 显 ， 它 可 以 帮助 你 专注 ， 并 使 你 在 那些 可 能 并 非 必需 的 事情 
面前 会 收敛 一 些 。 这 并 不 是 说 ， 你 不 能 尝试 那些 标新立异 的 东西 ， 它 更 多 是 
个 关于 通过 基本 要 素 构 建 一 个 坚实 的 基础 和 在 此 之 上 进行 建设 的 案例 。 























































































































































































































































































































































































































































































































Jason Santa Maria: 一 直 最 耗费 我 精力 的 事情 是 ， 寻 找 把 草稿 中 自然 流畅 的 
本 质 带 到 完美 的 数字 世界 的 方法 。 我 发 现 处 理 这 个 问题 的 最 好 方法 是 ， 尽 可 
能 远离 电脑 。 我 一 步 步 匀 勒 并 细 化 出 我 的 构思 ， 把 过 程 分 为 若干 个 循序 渐进 
的 阶段 ， 每 一 步 都 添加 新 的 内 容 ， 比 如 ， 色 彩 和 更 加 优雅 的 版 式 。 


Nathan Smith : 一 个 项 目 中 最 具 挑 战 的 部 分 是 信息 构架 。 人 们 很 容易 跳 过 i 
步 直 接 开 始 视 觉 设 计 或 开始 编码 ， 但 是 如 果 你 对 你 正在 构建 的 东西 没 
个 清晰 的 认识 ， 你 的 努力 将 变 成 徒劳 。 为 了 降低 不 确定 性 的 影响 ， 我 党 试 通 
过 高 级 的 线条 模型 进行 网 站 布局 。 我 喜欢 使 用 OmniGraffle 进行 建 模 。 对 了 
大 一 点 的 项 目 ， 我 将 使 用 分 类 学 或 思维 导 图 对 网 站 所 要 包含 的 各 种 信息 进 4 
分 类 。 对 于 思维 导 图 ， 我 喜欢 使 用 一 个 叫 FreeMind 的 免费 软件 。 它 使 我 能 
够 快速 地 把 不 同 的 节点 和 相关 的 主题 连结 起 来 。 在 花 了 一 些 时 间 把 元 素 摆 


完毕 后 ， 我 通常 会 对 信息 架构 (1A) 有 了 一 个 充分 的 了 解 。 


本 的 页 面 布 局 后 ， 我 将 投入 
到 实际 的 界面 设计 中 去 。 对 于 这 一 点 ， 我 发 现 没 有 什么 软件 可 以 和 Adobe 
Firework 媲美 。 它 显然 是 我 的 武器 库 中 用 途 最 广泛 的 视觉 设计 工具 。 虽 然 其 
他 一 些 人 可 能 更 倾向 于 使 用 Photoshop， 但 我 确信 Firework 更 适合 网 站 设计 。 


我 一 般 豆 欢 在 网 格 上 进行 设计 。 通 常 ， 我 将 会 在 12 或 16 列 的 网 格 上 开始 设 
计 ， 看 一 下 什么 比例 最 适合 我 将 展现 的 内 容 。 这 并 不 是 说 所 有 的 设计 都 需要 
使 用 960 像素 的 网 格 或 完全 不 使 用 任何 网 格 。 它 只 不 过 是 给 我 一 个 起 点 ， 在 
定 限 制 条 件 下 开始 设计 比 面 对 一 张 令 人 发 慌 的 白板 开始 设计 要 容易 些 。 

我 遇 到 的 最 常见 的 挑战 是 如 何 使 一 个 网 站 跨 浏览 器 兼容 ( 尤其 使 它 在 Internet Explorer 
6 中 工作 》 
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我 知道 我 要 构建 的 东西 ， 并 确定 了 一 个 3 
AY 
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Chris Spooner :我 发 现在 把 草图 转化 为 可 视 化 网 站 的 过 程 中 ， 主 要 的 挑战 是 
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精确 地 创建 并 部 署 元 素 。 粗 略 的 草图 把 整个 布局 较 快 地 整合 到 一 起 ， 但 是 线 
条 和 页 面 元 素 并 不 成 比例 ， 因 此 需要 准确 细致 地 重新 制作 。 

大 难 的 主要 方法 是 在 网 格 上 进行 设计 ， 同 时 也 会 借助 应 用 软 
和 提供 的 一 系列 页 边 空白 和 标尺 。 






















































































































































































































































































Nick La : 为 了 解决 这 个 问题 ， 我 避免 使 用 IE6 不 支持 的 CSs 属性， 或 直接 使 
| JavaScripto 
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Jay Hilgert ， 当 设计 一 个 网 站 时 ， 即 使 在 最 早 的 阶段 ( 在 Photoshop 中 ), 我 
最 专注 的 事情 就 是 功能 性 , 特别 是 用 户 界 面 。 我 会 问 自己 一 系列 问题 , 比如 ， 
“在 需要 为 用 户 提供 的 信息 中 ， 什 么 是 最 重要 的 ? “。 通 过 这 种 方式 ， 我 不 会 
偏离 方向 ， 而 直接 去 考虑 美学 问题 ， 或 者 我 所 谓 的 “脸蛋 儿 ” 
我 首先 会 按 内 容 的 重要 性 建立 一 个 大 纲 ， 这 将 帮助 我 决定 如 何以 及 在 哪儿 创 
建 导航 ( 我 的 目标 是 让 任何 浏览 网 页 的 人 能 够 在 页 面 载 入 后 不 到 一 秒 的 时 间 
内 ， 清 楚 地 知道 这 个 网 站 是 干什么 的 )。 


这 项 工作 一 旦 完成 ， 我 开始 处 理 外 观 和 感受 ， 尽 我 所 能 使 它们 与 内 容 、 目 标 
和 网 站 的 访客 契合 。 在 这 个 阶段 的 挑战 是 使 它 看 上 去 美观 、 同 时 尽 可 能 地 减 
少 载 入 时 间 、 优 化 图 片 、 检 验 标记 的 有 效 性 以 及 编写 硬 如 磐石 的 CSS。 测 试 
和 调试 是 最 后 的 挑战 ， 通 常 IE 是 最 糟糕 的 浏览 器 。 

“测试 和 调试 是 最 后 的 挑战 ， 通 常 IE 是 最 糟糕 的 浏览 器 。” 

我 该 如 何 战胜 这 些 挑战 呢 ? 大 量 的 咖啡 和 震 耳 欲 玲 的 音乐 。 


9.2.3 “如 何 确 保 一 个 网 站 能 够 真正 抓 住 某 个 企业 的 精髓 ? 
Jonathan Snook : 这 是 很 困难 的 ， 因 为 这 也 关系 到 一 个 企业 希望 怎样 展现 自 
己 的 精髓 。 通 常 ， 企 业 希 望 自己 像 竞争 对 手 那 样 。 理 解 一 个 公司 是 重要 的 ， 
它 的 核心 价值 是 什么 ? 它 在 努力 吸引 的 市 场 是 什么 ? 它 现在 的 市 场 是 什么 ? 
接受 这 些 信息 ， 把 它 和 任何 企业 可 能 已 经 建立 好 的 品牌 结合 起 来 ， 并 努力 把 
这 些 信 息 结合 。 记 住 ， 这 不 是 一 项 关于 投影 效果 和 最 新 技术 路 头 的 工作 。 这 
项 工作 是 创建 一 些 抽 象 的 东西 ， 这 些 东西 会 引导 访客 去 完成 任何 他 们 已 经 了 
始 着 手 去 做 的 任务 。 











































































































































































































问题 。 
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Larissa Meek : 设计 前 要 明确 目标 ， 比 如 : 
。 网 站 要 为 客户 做 些 什么 ? 

。 网 站 要 为 访客 做 些 什 么 ? 

。 客户 最 希望 推广 的 东西 是 什么 ? 

。 访客 最 可 能 做 的 事 是 什么 ? 
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一 个 商业 网 站 示例 。 



































如 果 能 同时 把 握 企 业 目 标 和 用 户 目标 ， 那 么 其 他 任何 事情 都 会 落 到 实处 。 设 
计 最 难 的 部 分 是 它 的 主观 性 ， 每 个 人 喜欢 的 东西 都 是 不 同 的 。 所 以 ， 创 造 一 
些 你 认为 是 正确 的 东西 ， 并 且 能 够 通过 合理 的 理由 支持 你 的 设计 决策 。 如 果 
你 知道 目标 ， 并 且 为 这 些 目标 工作 ， 你 就 会 抓 住 企业 的 精髓 。 





















































个 
S 































































































































































































































































































Nathan Smith ， 在 我 开始 为 客户 设计 任何 东西 之 前 ， 我 总 是 努力 理解 
要 的 因素 。 首 先 ， 网 站 的 用 户 是 谁 ? 其次， 客户 希望 传达 的 理念 是 什么 ? 我 
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义 定制 出 方案 ， 甚 至 在 他 们 制 











cd 
III 
3n 
T 

ur 
RS 
J 
aj 


坚信 ， 通 过 首先 考虑 
定 方案 时 能 帮助 客户 传达 出 他 们 的 “声音 ”6 
要 传达 什么 样 的 理念 ， 这 主要 依赖 于 什么 使 客户 与 众 不 同 。 

9 目的 和 目标 非常 重要 。 你 很 有 可 





















































































































































































































































当 为 企业 服务 时 ， 最 好 知道 它 的 竞争 对 手 是 谁 ， 以 及 他 们 的 核心 产品 和 服务 
是 什么 ， 这 样 做 的 目的 是 突出 客户 的 特别 之 处 。 
Dave Shea : 理解 企业 。 我 最 成 功 的 一 些 作品 是 建立 在 与 客户 公司 中 的 重要 
人 物 谈话 并 努力 理解 公司 的 愿景 和 服务 对 象 的 前 提 之 上 准确 地 理解 
客户 ， 事 情 将 变 得 更 加 容易 ， 就 是 接受 或 拒绝 那 "— 自理 解 的 设 
计 理 念 。 
Paul Boag : 在 Headscape， 我 们 有 一 整套 的 方法 专门 用 来 捕捉 企业 的 精髓 。 
这 个 过 程 有 时 包括 情绪 收集 板 ( mood beard ) 和 参考 网 站 (reference web- 
site ), 另 一 些 时 候 , 它 包含 更 多 的 抽象 技术 。 我 最 喜欢 的 是 "设计 目标 "( design 
objectives ) 和 “网 站 角色 ”( website personas )。 

设计 目标 和 企业 目标 类 似 。 对 于 企业 目标 ， 你 通常 会 为 网 站 需要 完成 的 任 
务 创建 一 个 项 目 列表 。 对 于 设计 目标 ， 你 的 列表 会 包括 你 想 要 传达 的 信息 
























































































































































































































































































































































































































































































































































































































































































































































站 角色 和 用 户 角色 具有 许多 共同 之 处 。 用 户 角 色 本 质 上 是 理论 用 户 的 虚构 
生活 方式 、 工 作 、 教 育 和 其 他 人 口 统计 信息 等 方面 的 细节 。 






























































































































































Y 
传记 

站 角色 与 之 类 似 ， 但 是 会 问 这 样 的 问题 ,，“ 如 果 你 的 网 站 是 一 个 人 ， 那 他 
会 是 什么 样 的 人 ? ”你 的 网 站 是 一 个 时 碾 的 少年 还 是 一 位 中 年 商人 ? 这 些 
色 有 助 于 定义 一 个 网 站 的 本 质 ， 并 将 它 表达 出 来 。 




























































































































































































9.2.4 对 于 某 个 特定 项 目 ， 你 如 何 确 定 哪 一 个 内 容 管 理 系 统 
( CMS ) 更 适用 ? 

Darren Hoyt ， 从 项 目 启动 会 议 开 始 ， 与 客户 紧密 合作 ， 并 对 他 们 的 需求 进 
行 认真 核查 ， 这 会 使 决定 用 什么 CMS 可 以 让 事情 变 得 简单 一 些 。 我 通常 在 
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这 些 会 议 的 前 一 部 分 帮助 客户 专注 于 诸如 读者 和 主题 之 类 的 大 问题 。 

在 会 议 的 后 半 部 分 ， 我 们 会 一 同 工 作 ， 来 确定 那些 支持 主题 所 需 的 一 系列 4 
征 。 头 脑 中 带 着 松散 的 网 站 结构 ， 我 们 开始 对 需要 静态 页 面 和 需要 定制 数据 
类 型 ( 比如 日 历 、 新 闻 档 案 和 房地产 列表 ) 的 部 分 进行 区 分 。 
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当 会 议 结束 时 ， 我 们 已 经 有 了 一 个 可 以 进一步 思考 的 “解决 方案 "。 对 于 中 
小 型 企业 ，WordPress 附加 一 些 插件 就 可 以 胜任 。 尤 其 近 些 年 以 来 ， 文 档 数 
Et 
x 
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大 大 增加 ， 插 件 的 质量 和 数量 也 有 所 提高 ， 客 户 开 始 喜欢 控制 面板 。 一 此 
开源 软件 ， 无 需 费 时 就 可 以 证 明 它们 的 持久 威力 。 目 前 ，WordPress 具有 主流 
的 影响 力 ， 以 至 于 许多 客户 实际 上 是 慕名 而 来 。 


些 开源 软件 ， 无 需 费 时 就 可 以 证 明 它们 的 持久 威力 。” 
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You are using WordPress 2.8. 


加 Appearance Save Graft) (Reset arm 
Bà Pagine. Recent Comments 

Que From Mr WordPress on Hello world! # Mant refs, 
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2.8 Release Jazzes Themes and Widgets June 10, 2009 
Most Popular Tim very excited to announce to everyone thatthe latest and greatest version of WordPress, version 
Sodible (instal) 2.8 "Baker; is immediately avaiable for dowrioad. 2.8 represents a rice fit and fich release far 
Wordoress wth improvements to taxonomies, and overall speed, We also fixed over 
on your posts, pages and ASS feed to your favorite social bookmarking sites. beri iot in honor FLTC) 
jins 


Onine customer support system, hosted based and ready to use. No database or space necessary at Dac scam E tees 
hod. 
Lloyd: A 20-minute Snooze in the Office 








WordPress 引擎 的 内 部 。 


如 果 客户 对 数据 的 输入 和 输出 要 求 非常 特别 ， 而 且 不 想 碰 任何 代码 ，Expres- 
sionEngine 和 Django 也 是 不 错 的 解决 方案 ， 它 们 都 有 顶级 的 开发 者 支持 。 与 
WordPress 相 比 ， 掌 握 它们 可 能 会 有 一 些 难 度 ， 但 是 它们 的 控制 级 别 会 更 高 
一 些 。 开 发 者 可 "e 9 需求 定制 管理 环境 , 如 果 客 户 经 常 需要 进行 维护 ， 
这 将 具有 很 高 的 价值 。 个 灵活 的 控制 面板 是 至 关 重 要 的 ， 它 可 以 应 付 接 
下 来 的 一 两 年 内 容 户 想 要 进行 的 重大 改变 。 
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向 专家 学 3 家 访谈 与 丰 



































我 还 认为 对 于 开发 者 而 言 ， 偶 尔 留意 一 下 CMS 讨论 社区 的 动向 也 是 一 种 逢 
好 的 方式 。 顶 级 的 开发 者 是 否 支 持 它 ? 论坛 是 否 活跃 ? 文档 是 否 在 更 
新 ? 插件 和 扩展 是 否 ? 是 否 规律 性 地 进行 着 升级 ? 创始 人 是 否 通过 提供 
状态 报告 和 未 来 的 开发 计划 来 吸引 公众 ? 公众 是 否 对 这 个 CMS 的 兴衰 感 兴 
EO 很 显然 ,没有 人 能 够 预见 未 来 , 但 是 如 果 一 个 CMS 很 快 淡出 人 们 的 视线 、 
支持 和 文档 越 来 越 少 ， 你 最 好 要 研究 一 下 ， 并 确保 你 的 客户 选择 另外 一 个 更 
4 前瞻 性 的 解决 方案 。 如 同 理 财 顾 问 的 职责 一 样 ( 监控 股票 )， 网 站 开发 者 
应 该 清楚 他 们 推荐 的 软件 的 第 一 手 信 息 。 


Paul Boag: 在 为 客户 选 CMS 时 我 会 参考 两 件 事情 ， 即 功能 和 支持 。 大 多 数 
客户 需要 相同 的 核心 功能 ( 页 面 生成 和 管理 )。 然 而 ， 除 此 之 外 可 能 会 有 4 
大 的 不 同 。 你 需要 考察 搜索 、 授 权 、 工 作 流 、 评 估 管 WA Bio 
我 也 花 了 大 量 的 精力 关注 CMS 中 的 编辑 器 。 客 户 将 花费 大 部 分 时 间 与 之 打 
交道 的 东西 ， 它 们 中 的 很 多 却 非 常 糟糕 ! 
你 需要 考察 的 第 二 件 事 情 是 支持 。 你 需要 确定 你 选 的 CMS 将 会 被 长 期 支持 ， 
这 样 用 户 才 可 以 得 到 他 们 需要 的 帮助 。 这 里 需要 考虑 的 是 安全 ( 是 否 经 常 发 
布 补丁 )、 开 发 团队 、 文 档 、 培 训 和 交流 社区 。 



























































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































Chris Coyier : 这 个 问题 的 理想 答案 是 ， 我 首先 评估 一 个 项 目的 准确 需求 ， 然 
后 根据 这 些 需求 对 每 个 主流 CMS 的 特长 进行 测试 ,并 作出 相应 的 选择 。 当 然 ， 
事情 从 来 不 会 这 么 简单 。 有 时 在 事情 进展 一 段 时 间 之 前 ， 很 难 知道 一 个 项 
的 准确 需求 。 有 时 客户 对 要 用 什么 CMS 已 经 有 了 一 些 想法 。 有 时 遗留 的 
题 会 影响 你 的 选择 。 


但 是 最 重要 的 是 ， 选 择 一 个 CMS 和 选择 一 辆 新 车 不 一 样 。 对 于 一 辆 汽车 ， 
即使 你 从 来 没有 开 过 它 ， 你 也 知道 该 如 何 开 它 。 插 入 钥匙 、 启 动 引 擎 、 挂 挡 、 
踩 油门 。 不 幸 的 是 ， 对 于 CMS， 事情 可 能 会 复杂 很 多 ， 没 有 什么 通用 的 准 
则 。 所 以 你 不 可 能 一 下 就 找到 “SESE” 的 CMS。 学 习 如 何 使 
设计 前 端 并 定制 开发 ， 需 要 经 历 一 段 不 短 的 学 习 过 程 。 
我 实际 上 首先 会 选择 WordPress. WordPress 是 我 所 知 的 最 好 的 CMS, EE 
我 为 客户 开发 的 80% 的 网 站 上 性 能 良好 。 如 果 我 可 以 用 WordPress 创建 一 个 
网 站 , 我 就 会 用 ,否则 我 将 寻找 其 他 的 蔡 代 品 。 需 要 说 明 的 是 ,这 和 懒惰 无 关 。 
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个 CMS 后 端 、 
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9.2 设计 过 程 众 妙 之 门 




















我 曾经 用 Drupal. ExpressionEngine, Sweetcron. Pinncale Cart, Magento 和 
Cube Cart 搭建 过 网 站 ， 我 自己 也 写 了 一 些 CMS。 选 择 你 最 了 解 的 东西 才 会 
省 时 省 力 。 


9.2.5 ”你 们 如 何 选 择 配 色 方 案 ? 
Collis Ta’ eed ， 当 为 一 个 设计 选择 配色 方案 时 ， 我 最 先 需要 考虑 的 是 Logo 
和 品牌 。 我 会 浏览 我 必须 在 网 站 上 使 用 的 那些 特定 的 图 片 和 其 他 的 素材 ， 医 
为 如 果 要 突出 它们 的 话 ， 这 对 色彩 进行 匹配 很 有 意义 。 如 果 外 部 的 东西 对 决 
定 配色 方案 没有 什么 帮助 ， 我 经 常会 转向 COLORIlovers 以 获得 调 色 灵 感 ， 医 

























































































































































































































































































































































































Larissa Meek: 通常 ， 我 会 基于 客户 的 品牌 指南 确定 配色 方案 。 然 而 ， 如 果 
开始 一 个 新 的 项 目 ， 我 会 从 图 书 、 杂 志 、 插 男 和 现 有 的 网 站 中 寻找 灵感 。 夫 
适 的 色彩 通过 设计 探索 被 发 现 ， 
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我 从 主页 开始 ， 选 择 几 个 主 1 
性 网 站 的 一 种 方式 。 一 旦 
3 在 网 站 的 其 他 部 分 。 

Elliot Jay Stocks :我 不 确认 我 在 选择 配色 方案 上 有 什么 特殊 的 倾向 。 它 取决 
于 是 否 必须 与 品牌 紧密 结合 ， 客 户 是 否 已 经 为 某 一 种 颜色 确定 了 一 种 基调 ， 
以 及 是 否 必 须 激发 某 种 特定 的 氛围 。 如 果 我 没有 思路 ， 我 会 到 处 看 看 或 浏览 
像 Adobe 提供 的 Kuler 这 样 的 配色 网 站 。 











和 和 配色， 它们 会 产生 对 比 ， 这 是 创建 一 个 高 





























































































































































































































































































































































































































Veerle Pieters: 首先 ， 我 会 看 一 下 公司 是 否 有 色彩 样式 指导 。 如 果 没 有 ， 在 
进行 网 站 设计 时 我 会 从 三 个 颜色 开始 : 一 个 深 色 和 一 个 浅 色 ， 以 及 一 个 和 前 
两 个 颜色 对 比 明 显 的 亮色 。 这 个 技巧 可 以 用 来 保持 和 谐 。 然 而 ， 很 多 的 配色 
方案 是 通过 直觉 选取 的 ， 它 们 可 能 来 自 像 Adobe Kuler 这 样 的 在 线 资源 或 任 
意 一 张 图 片 。 在 过 去 做 内 景 设计 时 ， 我 也 使 用 来 自 颜 料 样本 中 的 色彩 。 这 没 
什么 秘密 ， 任 何 时 候 我 都 可 以 分 享 这 些 成 果 ， 因 为 有 时 候 我 似乎 在 色 卡 中 发 
现 了 一 个 不 错 的 配色 方案 ,但 是 当 把 它 应 用 在 大 一 点 的 画布 上 的 时 候 ， 效 果 
却 不 怎么 样 。 实 验 是 这 个 过 程 中 的 一 个 重要 环节 。 
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向 专家 学 习 名 家 访谈 与 真知 灼 见 




















































































































Jon Hicks ， 作 为 色盲 ， 我 倾向 于 依赖 那些 通过 检验 和 测试 证 明 能 用 的 配色 方 
案 ， 或 者 从 我 的 周围 选择 配色 方案 ， 比 如 海报 、 活 页 、 照 片 以 2 - 
一 个 方案 都 有 一 种 感觉 和 含义 。 哪 个 正确 ， 这 取决 于 未 来 的 用 户 。 比 如 ， 对 
于 ReallyWorried.com 这 个 品牌 ， 它 使 用 了 宁静 的 、 女 性 偏爱 的 1 
色 和 紫色 )， 而 刺激 性 的 颜色 将 产生 完全 错误 的 感觉 。 
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Adobe 的 Kuler 需要 Flash 


9.2.6 ”你 们 在 每 个 项 目 中 字体 版 式 的 通用 原则 是 什么 ? 


Jason Santa Maria: 我 只 是 尽力 专注 于 容易 被 忽略 的 小 事 , 如 合适 的 字体 大 小 、 
和 谐 的 字体 组 合 以 及 正确 的 标点 。 


Khoi Vinh : 就 是 使 文字 看 上 去 不 错 并 且 可 以 阅读 。 


















































































































































Jeff Crot: 每 个 项 目 都 不 同 ， 很 难说 我 为 每 个 项 目 都 做 了 什么 相同 的 事 
但 是 以 NILE 实 aj 以 应 到 我 所 做 的 95% 的 工作 o 


。 设 定 网 格 基线 。 
。 选择 一 个 字号 ， 并 一 直 使 用 它 。 
。 只 限制 自己 使 用 三 种 及 三 种 以 内 的 ( 此 种 情况 很 少 发 生 ) 字体 。 
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9.2 设计 过 程 众 妙 之 门 





。 设 定 合适 的 行距 (leading length ) 和 长 度 单位 ( measure length )。 
。 使 用 合适 的 符号 ， 比 如 正确 的 引号 和 搬 号 。 

。 在 保证 效率 的 同时 要 尽 可 能 精美 。 

9.2.7 ”你 们 怎样 才 知 道 一 个 设计 做 完了 ? 


Wolfgang Bartelme :在 理想 状态 下 ， 一 个 设计 在 增加 或 减少 元 素 就 会 降低 可 
3 性 或 吸引 力 的 时 候 就 算 完 成 了 。 然 而 ， 在 现实 生活 中 ， 时 间 和 (mx) 预算 
的 制约 往往 在 设计 完成 后 才 会 清楚 。 即 使 你 宣称 一 个 设计 “即将 ”完成 ， 新 
的 要 求 很 快 就 会 到 来 ， 你 很 快 就 得 调整 甚至 重新 思考 你 的 设计 。 


Collis Ta eed : 很 难 知道 该 在 什么 时 候 停止 设计 。 理 想 状 态 下 ， 我 会 在 第 一 
次 感觉 快要 完成 时 ， 尽 量 休息 一 两 天 。 离 开设 计 一 段 时 间 有 助 于 头脑 清醒 ， 
以 便 让 我 可 以 更 加 客观 地 看 待 它 。 时 常 ， 当 我 回来 重 看 这 个 设计 时 ， 我 会 发 
DRS NE, T MESME, We THE, BEANS 
重新 设计 。 当 我 发 现任 何 改变 都 会 使 设计 变 得 更 糟 而 不 是 更 好 时 ， 设 计 就 算 
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Jon Hicks : 在 做 设计 时 ， 你 总 会 到 达 一 点 ， 你 感觉 只 不 过 是 在 为 它 添加 一 些 
无 关 紧 要 的 东西 。 在 做 一 个 项 目 时 ， 我 会 把 它 放 下 一 两 天 ， 然 后 再 回 到 项 目 
， 移 除 额 外 的 修饰 ， 把 它 精 简 到 只 剩 下 必需 的 元 素 。 那 时 ， 我 知道 设计 已 
经 完成 了 。 它 有 其 需要 传达 的 每 一 件 东西 ， 除 此 之 外 , 没有 别 的 东西 。 然 而 
我 而 言 ， 一 个 设计 永远 不 会 完结 。 我 总 是 会 回头 看 这 些 项 目 ， 看 看 哪里 还 
JD, “只 要 我 愿意 …… "e 
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Nick La ， 对 我 而 言 ， 设 计 从 来 不 会 结束 。 即 使 网 站 发 布 后 ， 我 也 经 常 可 以 
根据 反馈 对 其 进行 改善 。 


Khoi Vinh : 这 是 个 很 大 的 问题 。 很 难 知道 什么 时 候 才 算 完 成 。 当 然 ， 你 在 
追寻 切 都 处 于 平衡 、 和 谐 的 状态 , 每 一 个 元 素 都 各 居 其 位 , 按 逻 辑 的 、 
连贯 的 、 还 有 一 点 振奋 人 心 的 方式 展现 自我 。 它 也 有 另 一 种 含义 ， 就 是 一 个 
网 站 的 设计 方案 永远 不 会 完结 。 就 像 一 张 照片 ， 在 某 一 时 刻 抓拍 ， 照 片 中 
大 部 分 元 素 井 然 有 序 ， 但 是 你 所 看 到 的 仅 是 某 一 时 刻 的 景象 ， 一 个 状态 之 
还 会 有 另 一 个 状态 。 
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向 专家 学 习 名 家 访谈 与 真知 灼 见 



































很 难说 出 网 站 什么 时 候 可 以 做 好 进入 公众 视野 的 准备 ， 我 其 实 不 想 过 分 思考 这 个 问题 






































Keith Robinson :这 难道 不 是 一 个 充满 陷阱 的 问题 吗 ? 对 于 网 站 而 言 ， 设 计 
实际 上 永远 都 不 会 结束 。 很 难说 出 网 站 什么 时 候 可 以 做 好 进入 公众 视野 的 准 
， 我 其 实 不想 过 分 思考 这 个 问题 。 遵 循 你 的 直觉 ， 在 你 觉得 合适 的 时 候 就 


发 布 网 站 ， 只 要 你 活着 就 不 要 怕 做 小 的 改动 。 
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93 自我 提高 和 技巧 积累 


9.3.1 你 们 是 否认 为 设计 者 和 开发 者 应 该 接受 正规 的 教育 和 培 
训 ， 而 不 是 靠 自 学 ? 

Veerle Pieters : 这 实际 上 取决 于 个 人 ， 但 是 在 大 多 数 情况 下 ， 我 会 推荐 通 
接受 正规 教育 以 获得 更 好 的 理解 。 就 我 个 人 而 言 ， 在 网 站 方面 我 没有 接受 过 
任何 正规 的 教育 ， 因 为 在 过 去 它 根 本 不 存在 。 我 主要 靠 自学 ， 但 是 在 学 校 里 
学 到 的 设计 基础 知识 使 我 受益 匪 浅 。 我 认为 关于 设计 和 开发 集中 的 教育 会 / 
生 很 大 的 不 同 ， 但 是 持续 不 断 的 教育 才 最 有 意义 。 持 续 教育 、 > 
的 培训 同样 重要 。 因 为 我 们 在 为 互联 网 、 潮 流 和 技术 变革 进行 设 计 。 离开 学 
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93 自我 提高 和 技巧 积累 众 妙 之 门 
































校 后 你 的 学 习 并 未 完结 。 在 你 的 职业 生涯 中 ， 它 是 一 个 持续 的 过 程 。 

Tony Chester: 这 因 人 而 异 。 教 育 的 好 处 在 哪里 ? 我 曾经 跟 一 些 出 自 知名 学 

和 的 开发 者 一 同 工 作 。 

也 们 具有 关于 最 佳 实践 的 基础 知识 ， 他 们 可 以 把 它 应 用 到 任何 他 们 正 要 使 

的 技术 中 去 。 在 这 些 案例 中 ， 教 育 是 有 帮助 的 。 在 另 一 方面 ， 我 收 到 过 一 些 

刚 毕 业 的 计算 机 专业 研究 生 的 简历 ， 他 们 除了 Java 之 外 什么 都 不 知道 。 他 
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x 同样 的 知识 ， 一 eh » SEES HER iJ 实际 fe, 对 这 些 人 而 























































































































司 样 的 事情 也 在 设计 师 身上 发 生 。 如 果 他 们 能 把 色彩 学 、 版 式 和 布局 台 
应 用 到 网 站 上 一 一 尤其 是 如 果 他 们 学 的 是 平面 设计 一 一 他 们 就 做 得 很 不 错 。 
我 遇 到 过 太 多 的 设计 者 ， 他 们 在 Photoshop 中 能 做 出 很 漂亮 的 东西 ， 但 是 对 
导航 、 可 用 性 和 其 他 对 创建 优秀 网 站 至 关 重要 的 东西 一 无 所 知 。 


同时 , 业内 很 多 人 完全 是 自学 成 才 , 他 们 业绩 非凡 。 对 我 们 中 的 很 多 人 来 说 ， 

站 还 在 萌芽 期 或 者 根本 不 存在 ， 所 以 我 们 只 能 在 它 
出 现 后 进行 自学 。 最 后 ， 我 认为 最 好 的 选择 是 ， 有 一 个 较 强 的 专业 背景 ， 但 
同时 具有 不 断 学 习 的 动力 ， 以 及 能 够 不 断 扩充 对 新 媒体 的 认识 。 那 些 不 被 所 
工具 限制 的 人 ， 将 会 是 最 成 功 的 人 。 


«bh 4) SS GES. x^ tt Si: 二 + AY T JN zu 口 SEE 
j Tío S 10 JN o PALF JA 3 Hi FA D SPIN AA E IE 
R 适应 和 成 长 。 毕 业 并 不 意味 着 万 事 大 吉 ; J 人 贯穿 你 的 职业 生涯 的 


持续 过 程 。 
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Andy Budd: 有 这 么 多 的 人 自学 成 才 真 是 不 错 ， 因 为 从 这 一 点 可 以 看 出 ， 人 
门 对 这 一 行业 具有 多 么 大 的 动力 和 激情 。 然 而 ， 令 人 难以 置信 的 是 ， 他 们 可 
能 缺乏 一 些 从 事 这 行 所 需 的 基础 知识 。 对 于 网 站 设计 者 而 言 ， 这 些 缺 失 的 i 
础 知识 可 能 是 色彩 理论 、 网 格 设 计 和 版 式 之 类 的 东西 。 他 们 也 可 能 缺乏 更 加 
概念 化 的 领域 知识 ， 如 设计 思维 和 设计 批判 。 同 样 ， 很 多 开发 者 缺乏 软件 架 
构 、 安 全 、 数 据 规 划 和 设计 模式 等 方面 的 基本 技能 。 所 以 ， 虽 然 我 认为 很 多 
局 限于 某 些 开 发 语言 、 开 发 工具 和 开发 技术 的 课程 是 在 浪费 时 间 ， 但 是 这 些 
核心 技能 是 非常 有 用 的 。 不 仅 如 此 ， 随 着 这 个 行业 日 趋 成 熟 ， 我 们 需要 的 人 
立 该 具有 越 来 越 专业 的 技能 ， 比 如 在 设计 研究 、 可 用 性 测试 和 交互 设计 等 方 
面 的 技能 。 虽 然 这 些 技能 可 以 在 工作 中 学 习 ， 但 是 能 够 把 这 些 技能 应 用 到 
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向 专家 学 习 名 家 访谈 与 真知 灼 见 























此 ， 如 果 你 参加 专门 的 课程 可 能 会 把 这 些 技术 学 
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得 更 深入 一 些 。 



































Wolfgang Bartelme: 一 般 说 来 ， 接 受 正 规 教育 是 件 好 事 。 然 而 ， 这 只 是 开始 ， 
尔 仍 然 需 要 通过 参加 讨论 会 、 读 书 , 更 重要 的 是 , 通过 尝试 新 东西 i 


“那些 不 被 所 用 工具 限制 的 人 ， 将 会 是 最 成 功 的 人 。” 
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Collis Ta’ eed : 我 不 认为 接受 正规 教育 或 培训 是 必需 的 。 然 而 ， 这 却 是 一 和 
途径 ， 无 可 厚 非 。 就 个 人 而 言 ， 我 大 部 分 靠 自学 ， 我 仅仅 参加 过 夜校 课程 ， 
以 便 我 在 简历 上 有 些 可 写 的 东西 。 但 是 最 终 ， 并 没有 人 问 过 我 的 资历 。 实 际 
上 ， 人 们 一 直通 过 我 的 工作 表现 来 评价 我 。 
对 于 那些 正 准备 自学 的 设计 者 ， 我 非常 推荐 去 当地 图 书馆 借 一 些 关于 设计 基 
础 的 书籍 。 有 很 多 需要 学 习 的 东西 在 网 上 是 找 不 到 的 ， 尤 其 是 关于 设计 历史 
和 设计 演化 的 知识 。 


9.3.2 ”作为 设计 师 你 们 是 如 何 应 对 不 断 的 改进 和 进化 带 来 的 挑战 ? 


上 


Liam McKay: 作为 一 个 设计 师 ， 我 努力 提高 的 一 个 方式 是 对 自己 承诺 ， 在 
村 次 设计 中 都 尝试 一 些 新 的 东西 。 在 我 的 公司 Function 之 前 ， 曾 有 
个 阶段 ， 手 己 的 技术 非常 有 信心 ， 我 做 的 设计 都 非常 相似 。 在 每 个 设计 
中 ， 我 使 用 相同 的 蓝 色 色调 ， 使 用 相同 的 字体 、 效 果 和 风格 ， 这 导致 我 不 
能 从 设计 中 感受 到 乐趣 , 我 知道 我 必须 采取 一 点 措施 , 所 以 我 决定 从 此 以 后 ， 
在 我 所 做 的 每 个 设计 中 ， 都 要 包含 一 些 我 以 前 从 未 用 过 的 东西 。 党 试 新 东 相 
的 另 一 个 好 处 是 你 的 作品 集会 变 得 丰富 多 彩 。 不 同 的 风格 使 你 的 作品 增色 不 
少 ， 面 对 潜在 客户 ， 你 会 变 得 更 有 了 吸引 力 。 
我 想 可 以 肯定 地 说 ， 所 有 的 设计 者 总 是 尽力 完善 他 们 的 作品 ， 在 这 一 过 程 ! 
也 得 到 了 成 长 。 可 能 会 产生 障碍 的 主要 是 态度 : 在 行业 内 ， 你 永远 不 会 找 
到 高 高 在 上 的 感觉 ， 总 是 有 新 的 东西 需要 学 习 和 尝试 。 我 非常 清楚 我 还 没 
发 挥 到 极致 。 并 不 是 有 什么 事情 使 我 不 快 ， 我 总 是 会 确立 新 的 目标 并 为 
之 努力 。 
Dan Rubin: 我 总 是 在 寻找 那些 与 设计 直接 或 间接 相关 的 最 新 兴趣 和 创新 党 
试 。 我 把 自己 当做 一 个 一 般 意 义 上 的 “设计 师 ”， 而 不 是 一 个 媒体 方面 的 设 
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计 师 。 在 生活 中 ， 在 我 认为 应 该 投入 精力 的 方面 有 很 多 ， 我 把 自己 看 成 是 
个 有 创意 的 问题 解决 者 。 经 常 通过 探索 新 事物 进行 自我 挑战 ( 比如 摄影 、 探 




















































































































RS 


研究 心理 学 )， 同 时 关于 这 些 内 容 进 行 写 作 和 教学 ， 这 使 我 作为 一 个 设 
币 和 作为 一 个 人 ， 能 够 进行 自我 提高 和 完善 。 男 外 ， 尝 试 不 同 的 东西 也 会 
带 来 更 多 的 乐趣 。 
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Konigi 是 诸多 设计 展示 网 站 中 的 一 个 ， 此 网 站 是 关于 用 户 界 面 设计 的 。 


Andy Budd : 我 不 认为 变化 会 像 人 们 想象 的 那样 快 。 然 而 ， 如 果 你 希望 在 20 
个 不 同 的 领域 都 保持 领先 ， 那 就 困难 了 。 所 以 ， 努 力 做 好 某 些 事情 ;# 注 
于 那些 事情 。 这 样 ， 你 将 始终 处 于 队伍 的 前 列 而 不 是 一 路 追赶 。 博 客 很 显然 
Ee 一 种 与 最 新 趋势 保持 同步 的 好 资源 ， 但 是 它 的 数量 太 大 了 ， 会 使 你 无 所 适 
从 。 这 就 是 为 什么 我 建议 人 们 把 精力 投入 到 专业 的 开发 中 去 ， 并 且 要 参加 下 
讨 会 和 讲习 班 。 当 然 ， 这 些 你 都 可 以 通过 资源 丰富 的 互联 网 学 到 。 如 果 花 一 
些 可 以 支配 的 时 间 就 可 以 轻易 掌握 这 些 知 识 ( 并 很 快 可 以 学 以 致 用 )， 何 乐 
而 不 为 呢 ? 


Nathan Smith: 老实 讲 ， 我 尽量 不 去 读 太 多 设计 博客 中 排名 在 前 10 位 的 文 
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章 。 虽 然 这 些 文 章 对 于 寻找 关于 设计 软件 诸多 使 用 技巧 的 教程 很 有 帮助 ， 
但 是 对 于 那些 能 提高 技能 的 设计 原理 它们 却 很 少 涉 及 。 我 会 到 别处 去 寻 
找 灵 感 。 
网 站 设计 还 是 相对 年 轻 的 行业 。 因 此 ， 我 认为 学 习 设 计 最 好 的 方式 就 是 以 超 
越 的 眼光 看 待 设计 。 是 懒惰 驱使 我 去 CSS 在 线 画 廊 寻 找 别 人 做 过 的 东西 并 进 
行 模仿 。 


人 说 “艺术 是 用 来 欣赏 的 ， 设 计 是 用 来 使 用 的 。。 然而 ， 设 计 需 要 相当 高 
的 审美 标准 ， 我 认为 我 们 网 站 设计 领域 中 很 多 人 所 做 的 设计 是 用 来 崇拜 的 。 
我 们 希望 获奖 ， 和 希望 自己 的 作品 出 现在 在 线 画 廊 的 首页 ， 并 获得 五 星 评价 。 
我 们 希望 人 们 在 Twitter 上 反复 讨论 我 们 的 教程 。 但 实际 上 ， 对 于 终端 用 广 
而 言 ， 这 些 都 无 关 紧 要 。 伟 大 的 设计 是 透明 的 。 我 仍然 在 学 习 如 何 才能 不 沉 
了 
























































































































































































































































































































































































































































































































































































































































。 借 用 Joseph Ballay 关于 玛雅 设计 的 一 句 名 言 : “是 设计 的 透明 实现 
它 的 功能 ”。 
Keinth Robinson: 我 一 直 尝 试 新 的 东西 并 全 神 贯 注 地 进行 创造 。 对 于 一 个 设 
计 师 而 言 ， 客 户 项 目 和 日 常 工作 都 可 能 成 为 真正 的 挑战 。 我 每 天 会 抽出 时 
间 进 行 总 结 。 更 好 的 情况 是 ， 当 我 接 了 一 个 设计 项 目 时 ， 我 会 竭尽 所 能 地 
去 做 好 。 这 需要 自制 力 和 努力 ， 但 是 这 些 超出 常规 的 项 目 会 真正 帮助 一 个 
设计 师 成 长 。 

9.3.83 ”是 什么 把 一 个 优秀 的 设计 师 和 杰出 的 设计 师 区 分 开 ? 


Dan Rubin :要 理解 设计 不 仪 仅 是 视觉 的 ， 视 觉 设计 和 图 形 设计 仪 仅 是 我 介 









































































































































































































































































































































































































































































































































作为 设计 师 所 做 工作 的 一 小 部 分 。 当 人 们 要 求 我 对 “设计 ”进行 定义 时 ， 我 
告诉 他 们 的 答案 是 : 用 有 创意 的 方式 解决 问题 。 无 论 你 是 在 设计 产品 、 网 站 
应 用 程序 、 出 版 物 还 是 汽车 ， 视 觉 效果 都 是 方案 执行 后 的 结果 。 要 知道 作为 
设计 师 ， 你 的 第 一 角色 是 “问题 解决 者 "， 而 不 是 “插画 师 ” 或 “ 男 东西 的 

















































































































”， 或 者 甚至 以 为 自己 是 “photoshop 大 师 ”， 认 识 到 了 这 一 点 ， 意 味 着 你 






















































































Pau Boag: 着 迷 、 耗 时 、 移 情 。 杰 出 的 设计 师 对 细节 着 迷 。 他 们 会 花 若干 
小 时 进行 微调 ， 这 些 工 作 永 远 不 会 被 察觉 但 是 却 会 让 整体 的 设计 更 富 魅 力 。 
他 们 也 会 为 设计 添加 能 产生 非凡 效果 的 元 素 。 这 些 装饰 不 会 被 每 个 人 注意 到 ， 
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但 是 注意 到 的 人 就 会 记 住 这 个 设计 。 


当然 ， 对 细节 着 迷 是 需要 花 时 间 的 。 我 认为 大 多 数 客户 不 愿意 为 杰出 的 设计 





























































































































































































































































































































































































































































































































付费 ， 这 真是 一 种 耻辱 。 有 了 时候 如 果 为 了 创造 出 确实 令 人 惊叹 的 东西 ， 额 乡 
(eR 日 只 能 设计 师 己 承 担 。 

最 后 ， 我 认为 对 于 一 个 设计 师 而 言 ， 能 够 移 情 是 很 重要 的 。 我 们 最 终 不 是 在 
为 我 们 自己 进行 设计 dde 为 客户 进行 设计 。 我 们 在 为 目标 用 户 进行 设计 。 
真正 理解 这 些 用 户 以 及 能 从 他 们 的 感受 出 发 ， 对 我 们 而 言 是 至 关 重 要 的 。 优 
秀 的 设计 师 会 做 可 CR 杰出 的 设计 师 也 做 ， 但 是 他 能 通过 与 用 户 进行 
性 局 交流 来 指 sys 
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Eile Edit View History Favorites Tools Help 


S cacmor oet Vai you navo 
a suggestion or question. And dort INDEN o vet E reece 


this nouny rate cacutator to give you a quiae 
‘based on your costs, number of bilable hours and desired pront 1 
moie too! for you to play wth 


How much do you spend annually on Travet? 
Thot about artes ler. utes, peto 


s 


How much do you spend each year on Computers, Furniture and Equipment? 
a) 


How much do you spend each year on Software? 
s 





AA OO 


Freelanceswitch 的 比率 计算 器 。 








Jay Hilgert: 如 果 问 我 如 何 区 分 一 个 优秀 的 设计 师 和 杰出 的 设计 师 ， 我 的 答 
SÉ. 不 断 学习 的 渴望 。 在 这 一 行 ， 门 槛 总 是 在 不 停 地 提高 ， 软 件 总 在 不 停 
地 进化 。 一 个 杰出 的 设计 师 总 是 热切 希望 学 到 更 多 的 东西 ， 并 日 复 一 日 地 不 


Nick La : 优秀 的 设计 


XL 
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币 跟随 潮流 。 AN 杰出 的 设 VJ Jm 创造 潮流 。 
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9.4 发展 事 业 和 做 自由 职业 者 


9.4.1 你们 对 那些 开始 单干 或 开始 创业 的 设计 师 的 建议 是 什么 ? 
该 做 什么 和 不 该 做 什么 ? 

Henry Jones : 对 于 那些 想 要 创业 的 人 我 些 建 议 。 第 一 ， 建 立 好 的 形象 ， 
或 者 说 要 在 设计 社区 里 具有 一 定 的 知名 度 。 这 也 许 看 上 去 像 一 个 难以 完成 的 
任务 ,但 是 如 果 你 有 一 些 合适 的 技巧 ， 这 其 实 很 容易 操作 。 有 很 多 方法 可 以 
做 到 这 一 点 ， 但 是 也 许 最 容易 的 就 是 在 知名 的 设计 画廊 中 展示 自己 的 作品 或 
项 目 ， 这 可 以 使 你 的 作品 每 天 被 数 以 干 计 的 人 看 到 ， 既 包 括 设 计 师 也 包 
括 潜在 的 客户 。 实 际 上 通过 浏览 这 些 网 站 以 寻找 设计 天 才 的 潜在 客户 的 数量 

















































































































































































































































































































































































































































































































































































































































































































大 得 惊人 。 一 旦 你 建立 了 一 个 较 好 的 形象 ， 你 会 发 现 新 的 项 目 会 让 你 应 接 不 
Ezo 

第 二 ， 量 力 而 为 。 一 旦 咨询 服务 的 邮件 开始 往来 ， 你 会 本 能 地 对 所 有 问题 都 
说 “是 ”， 因 为 对 于 新 兴 企业 而 言 ， 建 立 好 的 客户 基础 是 很 重要 的 。 然 而 ， 
这 样 做 可 能 会 损害 你 的 名 誉 。 如 果 你 不 能 履行 承诺 或 者 你 交付 的 项 目 不 是 企 
部 分 都 具有 很 高 的 质量 。 一 种 更 好 的 方式 是 只 接 你 感 兴趣 的 项 目 和 你 力 所 


































































































能 及 的 项 目 。 


设计 社区 当然 是 一 个 很 不 错 的 地 方 ， 它 总 在 寻找 新 的 信息 、 资 源 、 意 见 和 灵感 。 
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Liam McKay : 当 我 自己 单干 、 开 博客 和 个 小 的 设计 公司 时 ， 我 实际 上 
并 没有 真正 的 计划 。 我 有 的 只 是 信心 和 对 优秀 设计 的 深刻 理解 。 我 在 原来 工 
吴 存 了 一 些 钱 ， 决 定 花 一 些 时 间 创 建 一 个 自己 的 博客 ， 并 在 博客 上 发 
些 免费 的 资源 。 我 非常 了 解 稳定 的 流量 能 够 带 来 许多 潜在 的 客户 ， 所 以 
我 发 布 免费 图 标 和 免费 WordPress 主题 背后 的 目的 纯粹 就 是 为 了 流量 。 参 与 
很 容易 ， 无 论 你 是 通过 创建 自己 的 博客 或 网 站 还 是 通过 参与 其 他 人 的 博客 。 
如 果 你 要 建立 自己 的 博客 或 设计 公司 ， 忽 略 参 与 设计 社区 和 开发 社区 可 能 带 
来 的 影响 是 不 明智 的 。 在 与 我 的 合作 者 Spencer 合作 建立 了 我 们 的 博客 后 ， 
我 意识 到 他 在 WordPress 方面 是 多 么 擅长 ( 同时 我 发 现 WordPress 作为 一 
个 CMS 用 途 是 那么 广泛 )， 我 决定 专注 地 做 我 们 的 长 项 一 一 优秀 的 设计 和 对 
WordPress 的 深入 开发 。 因 为 我 们 专注 于 这 些 领 域 ， 我 们 接 到 的 很 多 单子 也 
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都 是 基于 WordPress 的 ， 这 使 报价 、 议 价 和 与 客户 打交道 变 得 更 加 容易 。 人 
道 想 要 自己 什么 : 他 们 知道 WordPress 是 什么 、 它 能 干什么 以 及 我 们 能 
为 他 们 做 什么 。 所 以 毫 无 疑问 ， 把 我 们 自己 和 我 们 最 擅长 的 两 件 事 结 合 起 来 
Ee 个 好 主意 ， 因 为 这 使 我 们 能 够 专注 于 我 们 的 长 项 ， 这 也 意味 着 可 以 使 客 
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非常 了 解 我 们 能 为 他 们 做 什么 。 

办 设计 公司 需要 记 住 的 事情 是 ， 这 是 一 项 事业 。” 
Jonathan Snook : 开办 设计 公司 最 需要 记 住 的 一 件 事情 是 ， 这 是 一 项 事业 。 
设计 和 接 单 并 不 困难 ， 但 是 你 还 得 能 够 管理 现金 流 、 纳 税 、 合 同 转 包 以 及 
















































































他 的 事情 。 你 还 需要 确认 你 的 收费 和 你 的 劳动 是 相当 的 。 如 果 你 过 去 全 职工 
作 的 收入 是 每 小 时 25 美 金 , 那 你 现在 每 小 时 收 35 美 金 才 是 划算 的 。 不 幸 的 是 ， 
当 你 开始 审视 自己 的 时 间 分 配 时 ， 你 会 ( 也 许 有 一 点 ) 意识 到 每 天 能 够 用 来 
做 工作 的 时 间 是 多 么 少 。 每 小 时 35 美金 的 收费 按 一 天 的 时 间 来 平均 ， 相 当 
\ 时 才 10 美金 。 


Chris Spooner : 首先 ， 对 自己 的 技术 能 力 有 信心 是 提供 给 客户 服务 的 好 起 点 。 
在 以 后 ， 牢 记 这 一 点 也 是 个 不 错 的 主意 ， 那 些 编程 语言 和 设计 风格 你 都 
\ 太 熟悉 的 项 目 ， 最 好 不 要 去 做 。 补 记 这 一 点 ， 对 于 摘 述 你 的 专业 技能 和 界 
定 你 的 工作 方向 是 很 有 帮助 的 。 


与 行业 保持 同步 同样 很 重要 。 尤 其 是 伴随 着 全 球 网 站 设计 的 飞速 发 展 。 对 即 
将 到 来 的 变革 、 风 格 和 新 语言 有 所 了 解 ， 将 使 你 处 于 行业 的 领先 地 位 。 做 
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个 积极 的 博 主 或 社会 化 媒体 的 用 户 ， 这 是 一 种 自我 充实 、 分 享 知 识 的 好 
Andy Budd : 职业 市 场 已 经 极度 饱和 ， 要 脱颖而出 ， 你 需要 对 你 所 做 的 




















































































































东西 非常 精通 , 并 且 能 够 证 明 这 一 点 。 这 意味 着 为 重要 客户 创建 一 个 作品 集 ， 
并 在 杂志 上 、 在 线 画 廊 上 和 活动 中 展示 它 。 仅 仅 专注 于 目标 客户 很 难 高 质 
地 完成 这 个 任务 ， 所 以 我 推荐 与 那些 能 为 你 提供 更 大 、 更 复杂 的 项 目的 机 构 
合作 。 我 建议 设计 者 和 开发 者 要 专业 化 。 比 如 ， 在 你 特定 的 领域 树立 目标 ， 
做 最 好 的 设计 师 、 前 端 开发 者 或 Ruby 开发 者 ， 这 样 人 们 才 会 关注 你 。 

“与 行业 保持 同步 是 重要 的 ， 尤 其 是 伴随 着 全 球 网 站 设计 的 飞速 发 展 。” 
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向 专家 学 习 一 一 名 家 访谈 与 真知 灼 见 


























Jon Hicks: 我 的 最 大 的 建议 是 ， 忽 略 财务 将 使 你 面临 危险 。 和 确保 你 从 每 张 发 
票 中 留 出 了 足够 的 钱 ， 用 来 支付 税 单 ， 确 保 你 的 文案 井然 有 序 。 如 果 你 自 
己 做 账 有 拿 不 准 的 地 方 ， 不 要 在 财务 软件 上 浪费 时 间 ， 去 个 记 账 员 或 
会 计 吧 。 如 果 你 把 他 们 的 开销 和 你 做 这 些 事 每 小 时 的 工资 成 本 做 一 下 对 比 ， 
尔 会 倾向 于 怎么 做 ? 他 们 还 能 够 为 你 经 营 企 业 和 节省 税 款 提供 建议 。 


9.4.2 ”在 你 们 设计 展示 网 站 时 ， 主 要 遵循 的 原则 是 什么 ? 
Larissa Meek : 展示 你 最 好 的 作品 ， 而 不 是 展示 你 全 部 的 作品 。 通 过 个 案 分 
析 突 出 你 设计 选择 背后 的 策略 。 


。 列 出 你 使 用 的 技术 和 软件 。 


。 如 果 你 有 不 同 的 作品 集 ， 通 过 提供 AEA S EA 
( 比如 通过 Flash, CSS/HTML 和 移动 开发 等 条 件 进行 过 滤 )。 


。 如 果 是 个 人 作品 展示 ， 列 出 你 在 每 个 项 目 中 担任 的 角色 。 


Elliot Jay Stocks :在 提供 图 片 的 同时 要 提供 链接 ( 实际 上 ， 任 何 作品 集 只 
显示 图 片 而 没有 提供 可 供 检验 的 链接 ， 在 我 看 来 是 不 好 的 ， 也 是 不 太 可 
信 的 )。 让 作品 闪光 ， 让 内 容 呼 吸 。 对 于 你 在 项 目 中 做 了 或 没 做 的 事情 要 
诚实 。 如 果 不 是 特殊 的 案例 ， 用 最 少 的 文字 为 每 个 作品 集 添 加 一 个 说 明 。 
把 案例 研究 控制 在 最 小 的 数量 之 内 一 一 5 个 就 够 了 ， 如 果 多 了 就 没有 人 愿 
意 看 了 。 


Veerle Pieters: 首先 ， 让 你 的 工作 成 为 你 的 代言 人 ， 因 为 它 是 你 的 名 片 。 如 
果 你 是 一 名 网 站 设计 师 ， 最 好 的 做 法 是 使 用 W3C 标准 。 留 意 微小 的 细节 ， 
比如 对 版 式 的 思考 ,这 显示 了 对 工作 的 热爱 。 不 要 使 用 完全 基于 Flash 的 网 站 ， 
要 恰到好处 地 使 用 Flash。 不 要 因为 太 过 创新 而 使 事情 变 得 过 于 复杂 。 从 客 
的 角度 考虑 问题 ， 考 虑 一 下 要 对 你 的 作品 个 了 解 需要 几 个 步骤 。 不 要 
害怕 用 大 的 尺寸 展示 你 的 作品 ， 这 样 潜在 的 客户 才能 真正 看 清 细 节 ， 而 不 至 
于 因 图片 太 小 而 耗费 眼力 。 对 于 你 在 工作 中 的 角色 要 诚实 。 太 多 时 候 ， 我 
到 这 样 的 例子 ， 设 计 师 对 他 们 在 作品 中 的 贡献 含糊 其 辞 ， 以 至 于 客户 认为 他 
们 完成 了 全 部 的 工作 。 从 长 远 来 看 这 帮 不 了 你 。 分 工 没有 什么 不 对 ， 你 没有 
必要 人 靠 谎 称 自己 做 了 所 有 的 工作 获得 成 功 。 
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9.4 发 展 事 业 和 做 自由 职业 者 众 妙 之 门 
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Chris Spooner ， 因为 展示 网 站 是 对 你 作为 设计 师 的 技能 和 知识 的 展示 ， 我 
为 它 的 主要 原则 是 通过 设计 展示 网 站 本 身 的 设计 实践 ， 展 示 你 的 设计 理论 知 
识 和 对 设计 的 理解 。 然 而 ,我 也 认为 整个 作品 集 的 设计 不 应 该 过 于 显眼 。 所 
义 ， 我 想 在 布局 和 版 式 方面 ， 恰 到 好 处 的 轻 量 级 设计 是 一 种 不 错 选择 。 一 页 
清晰 易 懂 的 “关于 ”页 面 ( About )， 对 任何 作品 集 而 言 也 是 的 ， 这 是 把 
尔 自己 介绍 给 潜在 客户 的 一 个 好 办 法 ， 它 使 你 和 用 户 可 以 进行 互动 。 





^ Shannon Moeller 的 作品 集 


























% 
xe 
由 






































`j 






















































































































































































































































































































































































J penoad Yen e ra 
Sa 

OB. OO Olea aaa aa EU 
(eltenus tase 








YOUR (PhysicA MUSIC NEEDS YOU! 


ove MP3s. They let me sten to my favourite musie wherever Iam. They let me see what my 
bent friends are botening to at ony given time. They are abo massively accesible and can 
Sgufcatly reduce the isk factor when yia out sommethi ew 


However, I alto hate M92. Gone it ceems are the days whan people get excited about sleeve 


 ehatting to the staff abaut musie and trying to find the next sncesame thing Gone ako, and 
perhope moet importantly I think are the days when musse told tori. 


And that is what this post is about ~ 1 wanted to share some of the stories behind some of my 
favourite bits af physical mosie, heeance stories are what give musie it's saul T hape pon emoy 
reading and feel inspired to do something similar. 


b H 
CAVALIER. ^ 
a ETERNAL DISCO 


T AGAINST ME! BREAKDOWN 


Dese are ny fave Ageia Me! singlea, They came out between the Erat aad 
second LP» and all my mases and me were massively crash upin the AM hype. 30 


Done = ms = 


NEWBOMBTURKSRAWLAW 
NEWBOMBTURKSRAWLAW 




















Ags 


Gregory Wood 的 博客 通过 非常 规 的 布局 给 访客 留 下 了 深刻 的 印象 ， 每 一 篇 博客 都 有 
己 独特 的 版 式 。 
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Smashing Magazine 是 如 何 诞生 的 ? 我 们 是 怎样 工作 的 以 及 幕后 都 发 生 了 哪 













































































些 事情 ? 我们 成 功 的 秘诀 是 什么 ? 我 们 在 回答 读者 提出 的 这 些 问题 。 


Smashing Magazine 的 故事 不 是 那 种 经 典 的 类 型 两 个 小 伙 子 在 合适 的 时 
间 、 合 适 的 地 点 想到 了 一 个 非常 好 的 主意 。 这 是 一 个 关于 专注 、 耐 心 和 努 
力 工作 一 一 尤其 是 努力 工作 的 故事 。 在 Vitaly 最 近 参 加 的 一 次 会 议 上 ， 一 位 
充满 活力 的 年 轻 人 问 他 Smashing Magazine 的 成 功 秘诀 是 什么 。 坦 诚 起 见 ， 
Vitaly 竭尽 所 能 地 解释 说 ， 没 有 什么 秘 记 可 言 ， 只 不 过 是 充满 激情 并 专注 地 
投入 到 你 所 做 的 工作 中 去 。Vitaly 指出 了 努力 工作 的 重要 性 ， 最 重要 的 是 永 
远 不 要 放弃 ， 如 果 你 确认 正在 做 正确 的 事情 。 接 下 来 他 又 问 了 一 些 问题 ， 试 
到 获得 更 多 具体 的 、 可 量化 的 见解 ， 突 然 这 个 年 轻 人 走 开 了 , 消失 在 人 群 中 ， 
也 许 他 觉得 他 的 问题 没有 被 认真 对 待 。 




































































































































































































































































































































































































































































































































































































































































































































































































































































































































































事实 上 ，Smashing Magazine 没有 什么 特别 的 成 功 秘诀 。 我 们 有 明确 的 目标 ， 
并 且 清 楚 地 知道 该 如 何 实现 这 ps 整个 过 程 中 最 重要 的 品质 是 ， 实 
现 “设计 社区 ”预期 的 强烈 愿望 ， 而 不 管 这 会 耗费 多 少时 间 和 人 金钱。 这 个 背 
后 没有 什么 高 明 的 、 秘 而 不 宣 的 策略 ， 也 没有 幕后 操盘手 来 决定 哪 篇 文章 最 
适合 这 个 或 那个 市 场 活 动 。Smashing Magazine 现在 和 未 来 将 是 独立 的 。 
每 篇 文章 的 质量 完 内 容 的 实用 度 来 衡量 。 这 是 我 们 工作 的 主要 原则 。 
我 们 努力 工作 ， 以 确保 我 们 在 这 一 原则 问题 上 永 不 妥协 。 





10.1 一 切 是 如 何 开 始 的 


关于 Smashing Magazine 的 诞生 ， 最 不 寻常 的 事 也 许 是 我 们 从 来 没有 坐 下 来 
一 块 讨论 过 整个 事情 。 我 们 从 来 没有 坚 起 白板 ， 对 一 份 有 着 明确 市 场 模式 的 
成 功 杂志 进行 头脑 风暴 。 实 际 上 ,Smashing Magazine 是 一 次 随机 试验 的 结果 ， 
它 由 两 个 志同道合 的 网 站 工作 者 发 起 ， 他 们 具有 共同 的 激情 和 知识 ， 丰 富 的 
经 验 ( Sven ) 和 饱满 的 干劲 Vitaly )。 
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10.1 一 切 是 如 何 开始 的 众 妙 之 门 


切 都 开始 于 2006 年 8 Ho Vitaly Friedman ， 一 个 计算 机 专业 的 学 生 和 一 个 
LA 8 年 工作 经 验 的 网 站 设计 师 ， 偶 尔 开始 为 声名 远 播 的 德国 在 线 杂 志 
"Dr. Web ”撰写 文章 。 这 个 杂志 已 经 在 讲 德语 的 网 站 设计 圈 内 驰名 12 余年 。 
站 在 该 杂志 幕后 的 是 设计 师 Sven Lennarz， 一 个 把 编辑 并 且 维 护 Dr Web™ 
当做 自己 全 职工 人 
他 们 两 个 都 有 各 自 的 事务 要 处 理 ，Vitaly 在 萨 尔 布 吕 肯 ( 在 德国 的 西南 部 ) 
做 职业 者 ， 并 且 要 通过 大 学 考试 。Sven FANNE ( 在 德国 北部 ) 从 事 
网 站 设计 开发 并 与 作者 讨论 文章 的 构思 以 及 实现 Dr Web 的 创意 。 
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“每 篇 文章 的 质量 完全 由 其 内 容 实 用 度 来 稀 
比 时 ， 我 们 已 经 认识 网 年 多 ， LAE 来 没 过 J 或 见 过 Ho 我 们 B 






















































































尔 借助 电子 邮件 ， 对 最 近 的 开发 情况 和 新 帖 内 容 的 构思 进行 讨论 。 天 
t. oe 的 一 封 被 审慎 地 提出 来 并 不 足 为 
奇 。 老 实说 ， 这 个 对 我 们 两 个 来 说 都 算 不 上 什么 大 事 。 实 际 上 ， 为 设计 
者 和 2 份 英语 在 线 博客 的 想法 是 Sven 提出 的 。 当 Vitaly 建议 
"Smashing" ( "We smash you with the information that makes your 
life easier.” ) 这 个 名 字 时 ， 我 们 都 同意 建 一 个 简单 的 博客 、 发 一 些 文 
章 看 看 情况 ， 以 此 来 党 试 一 下 这 个 想法 。 那 时 我 们 既 没 有 经 济 上 的 支持 ， 
也 没有 可 签 的 单子 。 
项 目的 大 小 细节 ， 包 括 后 端 、 前 端 以 及 针对 发 布 内 容 的 意见 都 是 通过 大 量 的 
电子 邮件 来 讨论 ， 同 时 也 使 用 语音 留言 和 手写 便签 ， 这 也 是 为 什么 大 多 数 邮 
牛 的 标题 都 被 截断 的 原因 ( 如 “Re: Re: Re [34]”)， 这 也 是 为 什么 我 们 会 需要 
这 么 多 的 邮件 来 达成 一 致 的 原因 。 非 常 有 意思 的 是 ， 新 计划 a MRE 
合 是 由 Sven 和 Vitaly 在 德国 的 小 酒馆 、 比 萨 店 、 街 道 以 及 大 学 的 课堂 上 (或 

课程 之 间 ) 各 自 完成 的 。 


两 周 的 准备 后 ， 域 名 注册 下 来 了 ， 服 务 器 配置 好 了 ，WordPress 也 装 上 了 。 
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' http://drweb.de. 

? 现在 的 情形 也 没什么 太 大 变化 。 大 部 分 时 间 我 们 通过 E-mail 或 偶尔 使 用 Skype 讨 论 杂 志 的 文章 和 发 展 。 事 关 重 大 变 
革 的 讨论 通常 在 德国 不 同 的 城市 面对面 地 进行 。 

3 BSE : 这 句 话 的 含义 是 ,“ 我 们 会 用 使 你 惊 果 的 信息 简化 你 的 生活 ”, smash 一 词 在 此 处 的 含义 是 “使 ( 某 人 ) 过 于 
吃惊 或 高 兴 而 说 不 出 话 来 " 。 
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我 们 采用 了 最 先 找到 的 WordPress 最 小 化 主题 之 一 ， 它 即刻 就 可 以 使 用 。 















































Smashing Magazine 的 网 站 在 2006 年 9 月 8 日 上 线 。 杂 志 当 时 甚至 连 Logo 
都 没有 : 我 们 使 用 了 WordPress 模板 默认 的 Verdana 字体 作为 标题 。 最 初 
的 文章 来 自 Dr Web， 我 们 把 德语 翻译 成 英语 ， 并 把 它们 发 布 在 新 诞生 的 
Smashing Magazine 上 。 
这 些 最 初 发 布 的 文章 没有 获得 巨大 的 成 功 ， 当 然 ， 我 们 也 没有 指望 它们 能 获 
得 成 功 。 我 们 没有 公布 或 酝酿 任何 宏伟 蓝图 。 我 们 继续 处 理 各 自 的 事务 ， 保 
持 耐 心 和 决心 。 实 际 上 ， 数 月 后 我 们 才 获得 重大 的 突破 。 




















































































































































































































































































































































































































事情 进展 得 很 慢 ， 毕 竟 ， 我 们 各 自 都 有 各 自 的 事情 要 处 理 。 最 初 ， 我 们 达成 
致 ， 每 周 最 多 发 布 两 篇 文章 ， 以 Dr Web 的 文章 为 基础 并 补充 新 的 内 容 。 
比如 ， 我 们 扩充 这 些 德语 文章 的 内 容 并 为 国际 读者 润色 它们 。 流 量 在 最 初 的 
几 个 月 缓慢 地 增长 ， 但 是 直到 2006 年 年 底 ， 我 们 的 文章 ( 那些 早期 发 布 的 
































































































































































































































































































































文章 ) 开始 出 现在 威力 十 足 的 Digg 的 首页 之 前 ， 我 们 都 没有 看 到 流量 的 激 
"E 



























































我 们 第 一 次 扬眉吐气 是 由 于 “2006 年 50 个 漂亮 的 基于 CSS 的 网 站 设计 ”( 50 
Beautiful CSS-Based Web Designs in 2006 ) 这 篇 文章 带 来 的 巨大 的 访问 量 ， 
该 文 出 现在 了 Digg 的 首页 ,并 获得 了 3100 个 投票 。 当 然 , 由 于 Digg 的 效应 ， 
我 们 的 服务 器 月 演 了 几 分 钟 。 毕 竟 每 一 张 图 片 都 超过 150KB， 提 供 服务 的 
服务 器 没有 为 这 样 的 流量 高 峰 进 行 过 精心 配置 。 几 周 后 ，“53 种 你 不 可 或 
TE AI CSS 技术 ”( 53 CSS Techniques You Couldn’ t Live Without ) 的 5300 
票 的 成 绩 简 直 使 我 们 惊 有 呆 ， 这 是 Smashing Magazine 发 展 中 的 转折 点 。 从 
芳 以 后 ， 我 们 的 文章 在 各 个 媒体 上 表现 得 很 出 色 ， 它 们 带 来 流量 ， 并 通过 
广告 位 带 来 收入 。 在 那个 时 候 ， 我 们 知道 ， 我 们 必须 
制定 的 那些 保守 的 计划 。 我 们 也 知道 ， 我 们 最 终 必须 得 磁 一 次 面 ， 这 也 
是 第 一 次 碰面 。 





















































































































































































































































LA. 






































































































































| 四 
[rto 
SH 
Nx 
Cdi 
| Dg 
Æ 
x 















































































































































1 是 的 , 你 可 能 会 为 过 去 几 年 那些 遍布 在 互联 网 上 与 设计 相关 的 文章 列表 责怪 我 们 。 不 是 我 们 发 明了 这 种 格式 , 但 是 我 
们 使 它 达到 一 个 更 为 复杂 的 、 可 用 的 模式 。 
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10.2 我 们 是 如 何 走 到 今天 的 众 妙 之 门 


























通过 Smashing Magazine 谋生 并 不 是 我 们 的 想法 。 没 有 成 功 的 压力 ， 我 们 有 
够 的 耐心 ， 并 能 使 杂志 沿 着 正确 的 方向 稳步 前 进 。 对 于 网 站 设计 的 经 验 和 
激情 有 助 于 我 们 不 犯错 误 ， 并 使 我 们 坚持 做 各 自 的 事情 。 当 意识 到 设计 社区 
对 我 们 文章 感 兴趣 时 ， 我 们 向 前 迈进 了 一 步 ， 我 们 扩充 了 文章 内 容 并 优化 了 
文章 结构 ， 包 含 了 更 多 的 图 片 和 插图 。 一 些 读者 抱怨 ( 目前 仍 在 抱怨 ) RN 
文章 的 长 度 使 他 们 的 RSS 源 阅 读 器 和 他 们 的 电脑 变 慢 。 但 这 并 未 吓 住 我 们 ， 
我 们 继续 通过 长 篇 的 文章 来 使 读者 惊 采 。 
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2007 年 以 前 Smashing Magazine Logo 的 草图 。 













































































些 文章 是 如 此 之 丰富 ， 以 至 于 的 一 些 可 以 作为 独立 的 网 站 
什么 为 了 打印 方便 ， 我 们 开始 以 PDF 的 格式 提供 文章 的 原因 。 
当然 ， 较 长 的 文章 意味 着 这 个 小 项 目 需要 更 多 的 工作 和 更 大 的 投入 。 我 们 在 
中 上 到 处 搜索 墙纸 、 工 具 、CSSs 和 JavaScript 技巧 、 教 程 和 其 他 的 资源 。 我 
门 追溯 并 介绍 设计 趋势 以 及 共同 的 可 用 性 问题 。 此 外 ， 我 们 也 寻 技 高 级 的 题 
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;比如 数据 可 视 化 ,同时 通过 访谈 设计 师 和 专家 获取 更 多 的 专业 意见 。 至此， 
我 们 已 经 开发 了 一 系列 工具 用 来 自动 收集 有 用 资源 和 准备 设计 展示 。 我 们 
现在 每 周 可 以 发 布 更 多 的 文章 。 星 期 二 和 星期 四 专门 用 来 发 布 巨型 的 文 
章 ， 我 们 决定 通过 每 周 的 “星期 一 启示 ”系列 为 读者 提供 图 片 饱满 的 启 
发 性 内 容 。 
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Smashing Magazine 文章 的 
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全 部 插图 。 这 里 展示 的 是 一 个 集合 中 的 650 张 
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更 多 的 图 片 意味 


























门 不 得 不 经 常 性 



































如 果 没 有 Digg. StumbleUpon # 


大 的 服务 器 负载 。 








为 了 跟 上 访客 不 断 提高 的 
































bur j 充 服务 器 。 RF 通告 






































通过 其 他 媒体 网 站 发 现 我 们 : 
































A Delicious， 我 们 肯定 无 法 获得 这 么 多 的 流 












































以 借助 各 个 媒体 的 力量 传播 


Muhammad Saleem, Victor B 




















量 。 我 们 的 文章 因为 实用 或 





























有 启发 性 ， 经 常 
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友 帮 助 我们 更 好 地 理解 衬 
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Frederick Townes, Neil Patel, 

















attera, Dave (BlueNile), Tal Siach 和 其 他 一 些 朋 
体 ， 以 及 这 些 媒体 在 互联 网 上 的 作用 。 
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型 文章 。 很 多 Dr Web B C SEP d 





， 我 们 终了 
的 文章 是 翻译 和 原创 的 混合 


后 Vitaly 3| 
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吏 用 Dr Web 上 的 
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文章 了 。 比 前 ， 我 们 已 经 发 布 





























A: Vitaly 重新 写 文章 ，Sven 用 德语 写 文 章 ， 然 
巴 它 们 翻译 成 英语 。Smashing Magazine 的 读者 很 快 习 惯 了 我 们 标 
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不 了 这 种 新 的 样式 : CNA, 


10.2 我 们 是 如 何 走 到 今天 的 众 妙 之 门 






































f 些 讨论 的 更 多 的 是 项 目 管理 、 搜 索引 人 警 优化 ( SEO ) 和 网 站 开发 
而 不 是 网 站 设计 。 所 以 ， 我 们 渐渐 转向 为 Smashing Magazine 定制 原 
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我 们 很 快 发 现 ， 对 英语 的 掌握 程度 不 像 想 象 的 那样 好 。 越 来 越 多 的 读者 开始 
抱怨 语法 错误 、 拼 写 错误 和 含糊 不 清 的 句子 。 所 以 ， 我 们 开始 寻找 一 位 
业 的 校对 者 。 不 幸 的 是 ， 我 们 用 了 一 年 的 时 间 才 找到 一 个 合适 的 人 选 ，An- 
drew Lobo, JA 2008 年 11 月 开始 ， 他 出 色 地 编辑 了 Smashing Magazine 的 大 
部 分 文章 。 
根据 用 户 的 期 望 ， 我 们 发 布 内 容 的 频率 提高 了 。2007 年 年 底 ， 我 们 意识 至 
读者 数量 已 经 非常 可 观 ， 形 成 了 一 个 极为 多 样 化 的 读者 群 。 通 过 每 周 发 布 的 
两 篇 文章 来 满足 这 些 读者 的 预期 开始 变 得 困难 。 从 那 时 起 ， 我 们 开始 聘 
司 定 的 作者 。 


Sean Hodge 和 Mark Bloomfield 是 最 早 的 访客 作者 ， 他 们 帮 有 我 们 开阔 J 
Smashing Magazine 的 视野 、 主 题 和 格式 。 在 他 们 的 帮助 下 ,我 们 每 周 能 发 布 4、 
5 篇 文章 。 这 些 访客 的 文章 被 发 布 ， 我们 就 开始 收 到 来 自 全 球 设 计 者 不 
发 者 的 需求 。 因 为 写作 通常 是 一 项 间断 性 的 工作 ， 很 多 设计 者 可 以 在 
硕 目 之 间 完 成 。 当 新 的 项 目 开 始 时 ， 作 者 如 果 没 有 时 间 就 可 以 停 下 来 。 


寻 此 ， 我 们 总 是 在 寻找 新 的 作者 ， 这 并 不 是 一 件 容 易 的 事 。 为 了 寻找 能 外 
经 常 为 我 们 写作 的 作者 ， 我 们 花 了 很 长 时 间 。 我 们 既 被 动 地 寻找 ( 回答 
子 邮 件 中 的 疑问 )， 也 主动 地 寻找 ( 搜寻 对 设计 、 可 用 性 和 代码 有 深入 了 解 

ES )。 我 们 甚至 举办 了 一 次 Smashing 作者 大 赛 。 比 赛 中 ， 我 们 的 i 
者 可 以 以 访客 身份 提交 内 容 。 我 们 发 布 那些 最 有 意思 的 内 容 ， 最 佳 文章 的 作 
( 由 读者 评选 出 ) 将 获得 一 台 Apple MacBook Airo an ( 以 及 它 的 运送 ) 
本 身 就 是 一 个 故事 ， 因 为 以 “10 个 顶级 的 CSS 表格 设计 ”( Top 10 CSS Table 
Designs ) 获胜 的 R. Christie 居住 在 印度 尼 西 亚 。 
比较 讽刺 的 是 ， 我 们 确实 没有 通过 比赛 本 身 找 到 稳定 的 作者 ， 但 是 我 们 吸引 
了 全 球 许 多 自由 作家 的 关注 。 数 月 后 ， 我 们 聘用 了 一 批 优 秀 的 稳定 作者 ， 比 
如 Steven Snell 和 Jacob Gube。 后 来 ,其 他 的 作者 也 开始 为 我 们 写作 ( Vailancio 
Rodrigues, Jean-Baptiste Jung. Chris Coyier、 Kayla Knight, Inayaili de Leon, 
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Noura Yehia, Aquil Akhter, Danny Outlaw, Cameron Chapman, Glen Stans- 
berry 和 Matt Cronin )。 我 们 主动 地 搜寻 为 我 们 带 来 了 Chris Spooner 和 和 Dmi- 
try Fadeyev， 他 们 也 是 本 书 的 作者 。 这 些 新 的 作者 不 仅 为 Smashing Magazine 



























































































































































































































































注入 了 创意 ， 同 时 也 为 它 带 来 了 新 生 ， 使 它 能 覆盖 我 们 两 人 都 不 太 了 解 的 领 
域 ， 并 且 为 我 们 腾 出 时 间 ， 使 我 们 能 够 就 那些 比较 贴近 我 们 内 心 的 主题 写 一 
些 文章 。 

但 是 由 于 包含 了 我 们 所 不 熟悉 的 主题 ， 维 护 高 质量 的 内 容 变 成 了 一 种 挑战 ， 





习 为 我 们 的 确 不 知道 这 些 内 容 是 否 正确 、 是 否 体现 了 最 佳 的 设计 形式 和 代码 











































































































实现 。 所 以 ， 在 2008 年 年 底 ， 我 们 开始 邀请 专业 的 设计 师 和 代码 帮 
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对 一 些 文章 的 内 容 进 行 咨询 和 编辑 。 例 如 ，PHP 大 师 Chris Shiflett 和 Sean 
Coates 发 现 一 篇 关于 PHP 的 文章 : 些 严重 的 错误 ， 我 们 邀请 他 们 写 了 
一 篇 文章 更 正 。 当 文章 发 布 时 ， 我 们 利用 这 个 机 会 为 我 们 的 失误 和 由 此 产生 
的 不 便 公开 道歉 。 从 那 以 后 ， 我 们 相当 谨慎 地 处 理 不 熟悉 的 题目 ， 在 发 布 之 
前 尽 可 能 地 向 专家 咨询 意见 。 
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Smash 
Smashing 
































Smashing Magazine 两 周年 的 海报 ， 由 James White F 2008 年 8 月 设计 。 
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10.2. 我们 是 如 何 走 到 今天 的 众 妙 之 门 


截止 到 2008 年 ， 我 们 的 发 布 计划 已 经 提升 到 每 周 5 ~ 10 篇 文章 ( 过 去 周末 
是 不 发 布 文章 的 ， 然 而 ， 甚 至 这 一 点 最 后 也 改变 了 )。 从 那 以 后 ， 我 们 定期 
收 到 应 征 作 者 职位 的 信件 ， 我 们 从 来 没有 错过 任何 一 个 可 以 尝试 3 效果 
如 何 的 机 会 。 在 2007 年 到 2009 年 之 间 ， 我 们 发 表 的 文章 出 自 遍 布 世界 各 大 
洲 的 120 位 作者 之 手 。 遗 憾 的 是 ， 我 们 从 来 没有 见 过 他 们 中 的 任何 一 位 ， 我 
们 希望 这 种 情况 在 将 来 能 够 有 所 改观 。 
当然 ， 除 了 Smashing 作者 大 赛 ， 我 们 还 组 织 了 其 他 的 比赛 ， 来 给 我 们 的 读 
委 一 个 亲自 参与 以 及 创作 绝 佳 内 容 的 机 会 。 在 与 读者 的 共同 努力 下 ， 我 们 
经 发 布 了 页 首 图 形 、 纹 理 、 字 体 模 板 和 <hr /> 标题 作为 ` 载 资源 。 正 
如 你 预期 的 那样 ， 这 些 竞赛 的 获胜 者 将 会 获得 非常 酷 的 奖品 。 也 许 我 们 举行 
的 最 著名 的 比赛 是 设计 桌面 日 历 墙纸 ， 每 个 月 来 自 全 球 的 设计 者 都 会 把 他 们 
的 作品 发 给 我 们 ， 我 们 会 在 下 个 月 之 前 发 布 这 些 作 品 。 这 个 主意 是 Vitaly 向 
Sven 提议 的 ,起 初 Sven 对 此 表示 怀疑 。 实 际 上 ,我们 计划 活动 只 持续 12 TA, 
但 是 当 我 们 的 读者 希望 继续 时 ， 我 们 也 就 无 法 停止 了 。 有 时 候 我 们 仅仅 是 为 








































































































































































































































































































































































































(E 











































































































































































































































































































































































































































































































桌面 日 历 壁 纸 是 Smashing Magazine 最 成 功 的 系列 之 一 ( 注意 这 两 张 图 片 需要 合 





























并 一 下 )。 在 Smashing Magazine 上 最 成 功 的 一 些 作品 。 











了 发 奖品 而 发 奖品 。 多 所 























ARAM TRS HA 



















































































的 赠品 。 一 些 赠品 3 































































































我 们 为 他 们 带 来 巨大 的 流量 和 极 大 知名 度 。 实 陷 
特别 是 赠品 设计 和 做 BER 将 会 最 大 程度 上 ( 在 设 i 






































的 免费 字体 是 我 们 


产生 双赢 。Elena Gafita A 


主题 和 Jos Buivenga 
































最 早 发 布 的 赠品 。 




































































门 诚挚 地 感谢 他 们 为 之 付 





的 辛苦 劳动 ， 同 
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们 来 自 全 球 100 多 位 1 














时 感谢 他 们 人 允许 
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当然 ， 在 这 个 过 程 











ESE, Smashing Magazine (F! 
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但 是 仍然 多 上 
查阅 每 一 封 我 们 | 
了 三 次 严重 的 数 
Marit kK mm SEH 
发 布 。 非 常 不 幸 
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门 永远 无 法 触及 WordPress 的 引擎 了 。 




















并 不 是 所 有 人 都 知 j 
者 托管 服务 器 上 。 
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不 能 发 布 到 一 般 的 网 站 








& Smashing Magazine 这 样 的 









































我 们 遇 到 的 另 





杂志 不 断 增 长 的 流量 
































Digg 效应 、 一 次 Reddit 效应 ， 一 次 StumbleUpon 效应 


























dot 效应 ， 所 























起 ， 我 们 可 爱 的 服务 提供 商 对 我 们 的 服务 器 进 























一 段 时 间 的 限 流 ， 
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机 了 。 我 们 从 来 没 
们 小 小 的 博客 导致 了 服 






































它 吸引 了 太 多 的 






































( 那 时 还 是 支付 





































































































显然 支持 TB 级 流量 





























一 段 时 间 里 ，Google 4 

























































































的 情况 下 销售 文字 链接 ， 这 导致 了 和 F 网 站 被 Google 1€ 2:5 











10.3 ”我们 成 功 故 事 的 关键 因素 众 妙 之 门 









































除了 这 些 文 字 链 接 ， 几 个 月 后 我 们 又 出 现在 了 搜索 引 警 里 面 。 
前 ， 我 们 的 月 流量 在 TB 级 能 保持 在 两 位 数 的 左右 ， 我 们 有 定制 的 服务 器 ， 

站 放 在 德国 ， 离 Vitaly 住处 不 远 的 地 方 。 我 们 有 6 个 服务 器 不 间断 地 向 读 
者 传送 图 片 和 内 容 。 这 些 服务 器 的 配置 、 维 护 和 优化 由 Rene Schmidt 完成 ， 
他 也 是 本 书 的 作者 之 一 。 他 还 负责 定制 我 们 主 服务 器 上 的 WordPress 插件 ， 
这 些 插件 为 每 周 数 以 百 万 的 页 面 请 求 服务 。 











































































































































































































































































































































































































当 我 们 写 这 一 章 时 ，Smashing Magazine 中 一 共 包 含 了 761 篇 文章 ， 附 带 一 
些 页 面 。 这 并 不 多 ， 但 是 这 761 篇 文章 带 来 了 130000 条 评论 和 和 转发。 很 多 
评论 产生 于 2009 年 2 月 ， 在 我 们 赠送 礼品 期 间 : 我 们 希望 关于 那个 帖子 有 











































































































尽 可 能 多 的 评论 ， 最 终 我 们 如 愿 以 偿 。 当 评论 达到 8999 条 时 ，WordPress 
































MRT 
10.3 ”我 们 成功 故 事 的 关键 因素 
虽然 一 个 新 的 想法 有 很 多 途径 变 成 一 个 成 功 的 故事 ， 有 一 件 事情 是 明确 的 ， 





































































































































































































成 功 需要 大 量 艰辛 的 工作 ( 这 不 算 什么 重大 发 现 ,但 还 是 值得 提出 来 )。 虽 然 ， 
我 们 的 一 些 读者 对 于 成 功 另 有 高 见 ， 但 是 我 们 总 是 避免 。 有 时 ， 如 果 能 够 获 
取 独 有 的 、 有 价值 的 内 容 ， 我 们 故意 选择 比较 困难 的 方式 ( 比如 ， 当 我 们 准 
备 进行 调查 和 个 案 研 究 时 ， 每 次 都 要 耗费 近 60 个 小 时 的 时 间 ， 我 们 发 现 这 
一 个 很 难 打破 的 纪录 )。 
对 我 们 和 读者 而 言 ，Smashing Magazine 外 观 不 像 发 布 的 内 容 那 样 重要 。 


实际 上 ， 有 价值 的 内 容 或 者 更 精确 地 说 ， 写 作 、 编 辑 和 发 布 有 价值 的 内 
容 一 一 是 我 们 多 年 来 工作 的 重心 。 内 容 当 然 是 成 功 的 关键 , 在 我 们 的 案例 中 ， 
它 就 是 真正 的 终极 要 素 。 事 实 上 ，Smashing Magazine WKIRAWH ADR 
的 或 者 十 分 美观 的 设计 : 我 们 用 的 是 滑稽 的 大 标题 ， 我 们 的 搜索 引擎 多 年 来 
表现 平平 ， 一 些 设计 元 素 并 未 连贯 地 对 齐 而 且 风 格 不 一 致 。 
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但 是 所 有 的 这 些 都 不 要 紧 ， 对 我 们 和 读者 而 言 ，Smashing Magazine 的 外 观 
像 其 发 布 的 内 容 那 样 重要 。 在 完全 忽略 视觉 设计 的 同时 ， 我 们 把 更 多 的 精 
力 投 在 稳定 的 可 用 性 和 功能 性 上 。 最 重要 的 是 ， 有 价值 的 、 中 肯 的 内 容 ， 是 
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驱动 访客 一 而 再 、 再 而 三 地 回来 访问 我 们 的 网 站 。 

我 们 初期 得 到 的 一 个 教训 是 ， 要 对 来 自 各 方 诱惑 性 的 提议 说 “不 ”。 当 你 刚 
刚 走 上 正轨 ， 你 就 立刻 会 被 一 大 群 想 分 享 你 的 成 功 的 党 鱼 包 围 ， 他 们 会 通过 
非常 有 说 服 力 的 条 件 引 起 你 的 注意 。 实 际 上 ， 除 了 分 享 你 的 成 功 和 能 为 他 们 
带 来 流量 或 收入 的 所 谓 的 “伙伴 关系 ”之 外 ， 这 些 准 鱼 甚 至 不 知道 他 们 想 从 
尔 那里 得 到 什么 。 从 一 开始 我 们 决定 始终 如 一 地 做 自己 的 事情 ， 并 且 把 它 做 
好 。 预 先 避 免 分 心 有 助 于 我 们 在 将 来 避免 问题 。 

如 果 我 们 必须 定义 这 些 年 来 对 我 们 工作 影响 最 大 的 原则 ， 毫 无 疑问 它 将 是 我 
门 不 遗 余力 地 去 理解 客户 并 实现 他 们 的 预期 。 我 们 坚持 不 懈 地 倾听 读者 关 
F Smashing Magazine 的 提问 和 抱怨 ， 我 们 甚至 监视 发 生 在 杂志 之 外 的 话题 。 
比如 发 生 在 博客 、 论 坛 和 社会 化 媒体 中 的 话题 。 我 们 坚持 不 懈 地 对 所 触及 的 
言 息 进行 分 析 和 分 级 ， 进 一 步 处 理 那 些 可 能 有 用 的 信息 ， 并 抛弃 那些 对 我 们 
的 读者 无 益 的 信息 。 显 然 ， 当 大 部 分 ( 尤其 是 多 样 化 ) 读者 的 已 经 形成 了 很 
高 的 期 望 时 ， 使 他 们 失望 变 得 非常 容易 。 读 者 似乎 总 是 记 住 那些 评论 截然 
反 的 、 有 争议 的 文章 。 这 些 文章 的 被 评论 的 次 数 总 是 高 居 榜 首 ， 经 常 包 含 类 
以 “史上 最 差 ” 之 类 的 字眼 。 











我 们 著名 的 


























标 ， 


RSS 源 























用 的 Dirceu Veiga 设计 ， 











2008 4 








F 免 费 发 布 。 
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Smashing Magazine 于 





10.3 ”我们 成 功 故 事 的 关键 因素 众 妙 之 门 















































所 以 ， 要 找到 正确 的 发 展 方向 ， 理 解读 者 的 兴趣 和 需求 变 得 特别 重要 。 要 获 
得 这 种 洞察 力 ， 最 简单 的 方式 之 一 便 是 把 自己 放 到 读者 的 位 置 。 在 我 们 的 
案例 中 ， 这 很 容易 做 到 。 我 们 自己 就 是 网 站 开发 者 ， 依 据 我 们 的 专业 知识 做 
出 判断 ， 我 们 决定 专注 于 那些 具有 最 高 实用 价值 的 内 容 。 事 情 的 结果 是 全 球 
数 以 干 计 的 设计 者 和 我 们 着 有 相似 的 兴趣 ， 我 们 的 专业 知识 很 显然 对 他 们 4 
3。 从 一 开始 ， 实 用 性 标准 就 是 我 们 工作 不 可 违背 的 前 提 ， 它 已 经 确定 ] 
我 们 所 发 布 内 容 的 本 质 。 


我 们 的 读者 经 常会 问 我 们 是 如 何 与 他 们 心有灵犀 的 : 也 就 是 ， 他 们 在 搜寻 世 
一 方面 时 ， 我 们 恰好 发 布 一 篇 有 深度 的 文章 。 我 们 的 目标 是 传递 实用 而 且 司 
的 内 容 ， 所 以 我 们 发 布 的 文章 正好 是 ， 一 些 设计 者 和 开发 者 正在 搜寻 的 资 
源 并 不 足 为 奇 。 我 们 了 解读 者 ， 读 者 也 发 现 有 份 杂 志 为 他 们 的 
了 帮助 。 最 后 ， 这 个 不 难 实现 ， 因 为 我 们 曾经 对 读者 的 需求 有 过 真诚 的 探求 
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f 们 决定 尝试 Twitter( 这 实际 上 已 经 很 晚 了 )。 
我 们 开始 了 解 各 种 个 人 信息 life-streaming ) 程序 ， 并 想 试 
效果 如 何 。 坦 白地 说 ， 我 们 台 持 怀 疑 的 态度 但 最 终 习惯 了 它 。 我 们 拿 这 
服务 做 实验 ， 努 力 探索 如 何 使 用 它 更 好 地 跟 读者 交流 。 最 后 ， 我 们 想 出 了 
多 主意 ， 目 的 在 于 把 读者 更 加 紧密 地 整合 到 Smashing Magazine 的 日 常事 









































Nm. 
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我 们 现在 在 Twitter E235 的 点 子 、 幕 后 的 全 





| 意 和 个 人 见地 。 





























我 们 要 求 Twitter 的 粉丝 积极 参与 决策 过 程 。 比 如 ， 我 们 的 粉丝 可 以 决定 接 
“来 发 布 哪 篇 文章 ， 并 对 未 来 要 发 布 的 内 容 提 供 有 趣 的 建议 。 我 们 也 在 杂志 
AY “Ask SM” 部 分 对 读者 的 难题 和 问题 进行 跟 进 。Twitter 已 经 变 成 了 我 们 和 
读者 交流 的 主要 渠道 ， 并 使 我 们 能 够 更 加 了 解读 者 ， 使 读者 参与 进来 ， 以 及 
使 我 们 更 好 地 预见 他 们 的 需求 和 兴趣 。 









































































































































































































































| 当然 , 理解 读者 绝 非 是 放 之 四 海 而 皆 准 的 黄金 法 则 。 比 如 , 许多 艺术 家 采用 更 加 自我 专注 的 方式 , 仅仅 做 他 们 想 做 
的 事情 , S6 B A ALS, 在 我 们 的 案例 中 , 理解 设计 师 的 需求 是 至 关 重 要 的 , 否则 , 我 们 将 根本 无 法 达到 观众 
的 需求 。 
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10.4 幕后 在 发 生 着 什么 ? 




















rh 





























在 Smashing Magazine， 质 量 控制 始终 是 一 件 至 关 








BANS fS, Jt 
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我 们 工作 一 半 以 上 的 时 间 。 我 们 把 引导 读者 的 兴趣 和 确保 发 布 的 文章 正确 、 
























































可 用 、 清 晰 作为 我 们 的 任务 。 最 后 一 点 解释 了 为 什 和 




















每 次 为 了 达到 
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惊 采 的 效果 ,大 多 数 的 发 布 
编辑 、 更 新 以 及 一 遍 遍 地 重新 编辑 。 















































内 容 要 花费 20 个 小 时 以 上 的 时 间 以 去 准 






















































































需要 这 么 长 的 时 间 去 准备 内 容 的 另 一 原因 是 ， 这 些 内 容 
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布 全 球 的 
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一 大 群 作者 合作 完成 的 。 我 们 经 常 和 来 自 欧 洲 、 大 洋 洲 

































































稿 人 合作 ， 以 确保 内 容 的 丰富 多 彩 和 与 众 不 同 。 我 们 | 
























































的 反馈 也 整合 进来 。 编 辑 团队 仔细 审阅 每 份 提交 上 来 的 内 容 ， 如 果 





















































Bj fz X, 原来 的 文章 将 被 改写 并 追加 上 新 内 容 。 



















































































的 东西 往往 还 可 以 更 好 ， 我 们 的 作者 同样 也 会 经 常 注 






































|. NEN RS EN HE 
也 尝试 把 Twitter 粉丝 
RAR 
注意 到 数 不 清 的 、 由 编 
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提议 的 改写 、 扩 充 和 ( 但 愿 是 ) 改进 ， 即 使 是 在 发 布 文 
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F 
文章 可 能 已 经 更 新 了 5 个 版 本 。 我 们 每 天 计划 发 布 的 》 
P 平 文章 的 作者 多 有 名 望 : 我 们 的 目标 是 传 























































































































不 至 的 是 ， 我 们 的 判断 有 时 会 误导 我 们 ， 我们 也 会 犯错 ， 比 如 问 作者 错误 的 
问题 或 是 为 读者 提供 错误 的 答案 。 但 是 我 们 知道 我 们 会 对 发 布 的 个 
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S 张 图 片 负责 。 
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我 们 非常 欢迎 任何 建设 性 










































































强 或 在 未 来 避免 同类 错误 的 反馈 。 出 于 对 质量 的 考虑 ， 




















们 的 准则 ， 并 在 任何 必要 
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的 时 修 对 它 进行 完善 和 订正 。 我 们 从 











意见 ， 以 及 所 有 那些 能 使 我 们 变 得 更 加 














我 们 也 会 不 断 检 查 我 




















己 的 错误 





















































学 习 ， 并 能 足够 坦诚 地 承认 错误 ， 并 为 错误 道歉 ， 而 









































这 是 我 们 哲学 中 重要 的 一 部 分 。 








F 以 百 会 尽力 改正 ， 
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这 看 上 去 可 能 像 一 个 严格 的 、 高 难度 的 工作 流程 ，1 














LR 上 它 营造 




























































































常 具 有 创意 的 、 多 产 的 环境 。 根 据 我 们 的 经 验 ， 最 初 
得 一 篇 好 的 文章 来 说 是 至 关 重要 的 ， 所 以 我 们 经 常 鼓 


跟 作者 的 沟通 
励 作者 提问 















































与 我 们 分 










































































享 他 们 的 难题 。 我 们 也 经 常 向 作者 推荐 有 趣 的 观点 和 方向 ， 也 许 这 


























没 想到 的 。 
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10.4 幕后 在 发 生 着 什么 ? 众 妙 之 门 





smashing magazine 


we smash you with the information which will make your life easier. really. 


QOHTML template systems — 
in PHP » = 


// october 1st, 2006 
Web developers find themselves sooner or later in a dire situation: their scripts categories 
become an entangled mess of code. Program logic, presentation logic and in a 
worst case scenario even layout and design are so interconnected with each 

other that the further development becomes difficult. Would one have thought 
ahead and had created a clear structure for the code - the so-called Tips» (1 
HTML-template-engines, the integrity of the layers would have been preserved. 


Color palettes » (2) 


Lists » (5 


Trends » (1) 
A HTML-template-engine serves to separate program logic (PHP), from layout, Tutorials (1) 
(HTML) and design (CSS). Most existing template-Systems are not limited to 
HTML-models. They are generally usable for E-Mail and even XML. 
Program code can be changed independently of the web site design. All this is EJ 
theory though. In practice and complex projects this division can not be realized 
most of the time. To prevent inflating the program code unnecessarily with News-Feed 


representation logic, another fourth level is often added. In this layer logical 
connections are processed, which directly affect the representation, Example: 
Table line paging or dynamic lists. 


Previous Posts 

A further substantial advantage of HTML templates is the reusability of program 
code, design and layout. A template can be used in numerous places on a web * HTML Template Systems 
site. Changes in a template affect all pages where this template is being used. e List of Best SEO- Tools 
This can save a considerable amount of time and money, because instead of * Color Palettes: Insurance 
several pages, just the template has to be changed and proofed. e The List Of Lists 
* Color Palettes: Traveling 
Levels 

* Symbols, Buttons & Icons 
* Web 2.0 Design Trends 
* List of CSS Tools 
* Nifty Tools & Diagrams 
* 1 User Online 


Program logic 

On this level typical script tasks are settled, for example retrieval and 
conversion of data from the data-base. If the HTML template system is 
initiated, variable html templates are assigned to the appropriate substitute 
symbols. 


Layout-level 

It consists of models, for example of HTML. The model of a specific site can be 
composed of several templates, which are joined in program logic more directly 
by the template system. The layout too will partly be determined on this level; 


月 的 Smashing Magazine。 这 就 是 追溯 到 2006 年 11 月 时 我 们 为 它 设计 的 样子 。 


我 们 的 供稿 者 对 所 写 的 题目 感到 得 心 应 手 ， 并 为 所 写 的 内 容 感到 兴奋 ， 这 
点 对 我 们 来 说 很 重要 。 为 了 避免 写作 过 程 中 产生 误解 我 们 为 作者 提供 了 
系列 的 写作 模 板 和 一 份 写作 风格 指南 ， 它 们 囊括 了 我 们 的 要 求 和 预期 。 


应 的 ， 我 们 没有 通过 设置 截稿 时 间 来 限制 作者 的 创造 力 。 而 由 作者 决定 写 
一 篇 文章 需要 多 长 时 间 以 及 需要 投入 多 少 努力 。 
的 努力 和 奉献 进行 答谢 ,这 也 是 为 什么 那些 耗 日 
奖金 。 我 们 工作 的 一 条 主要 原则 就 是 公正 地 对 待 我 们 的 作者 。 在 对 作者 的 出 
色 工 作 进 行 奖励 的 时 候 我 们 从 不 犹豫 。 比 如 ， 在 他 们 为 Smashing Mazagine 
完成 第 10 篇 文章 时 付 给 他 们 一 笔 可 观 的 奖金 。 我 们 在 作者 身上 花 了 大 量 的 
金钱 ， 他 们 对 每 一 分 钱 都 受 之 无 愧 。 
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那些 经 久 不 衰 让 人 受益 菲 浅 

































































和 容 要 经 过 数 月 的 
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己 来 写 文章 ， 
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10.5 感谢 你 ， 设 计 社 区 
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N 门 很 多 个 以 
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社区 的 巨大 支持 、 






























































可 免费 获取 的 文 忆 














这 封 令 人 感 
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在 它 的 发 展 

























































































注意 到 这 
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分 享 激 | 
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已 经 发 布 了 大 量 高 





































































































在 支持 社区 ， 
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10.5 感谢 你 ,设计 社区 众 妙 之 门 



































事实 上 ， 离 开 这 些 奉献 ，Smashing Magazine 将 无 法 存在 。 杂 志 最 重要 的 元 
素 永远 是 我 们 的 读者 。 离 开 作 者 、 数 百 位 贡献 者 和 数 百 万 自 网 站 上 线 以 来 就 
浏览 网 站 并 推荐 杂志 的 访客 的 强烈 支持 和 投入 ， 杂 志 不 可 能 走 到 今天 。 我 们 
的 工作 不 仅仅 是 为 社区 做 贡献 ， 我 们 还 要 帮助 维护 社区 那 能 够 使 创意 产生 、 
创见 交换 、 讨 论 发 生 的 创造 力 十 足 的 环境 ， 并 使 设计 者 和 开发 者 生活 得 更 加 
异 意 和 富足 。 是 你 们 开启 它 并 使 它 成 为 可 能 。 每 一 个 贡献 ， 即 使 是 最 小 的 ， 

会 让 未 来 大 不 相同 。 我 们 认识 到 了 这 一 点 ， 我 们 很 尊重 你 们 ， 并 感谢 你 们 
的 支持 。 在 未 来 ， 我 们 将 继续 竭尽 所 能 地 坚持 这 一 点 。 
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师 、 前 端 工程 


余 果 ， 腾 讯 社交 用 户 体验 设计 部 前 端 工程 师 


众 妙 之 门 


( 修订 版 ) 





知名 设计 网 站 Smashing Magazine 上 线 以 来 的 精华 总 结 ， 
来 自 全 球 的 知名 设计 师 多 年 积累 宝贵 经 验 的 无 私 分 享 。 





























《 众 妙 之 门 一 一 网 站 UI 设计 之 道 》( 修订 版 ) 共 分 10 章 ， 前 8 章 讨 论 了 和 网 站 UI 设 计 相 关 的 
8 个 不 同 的 领域 ， 履 盖 面 非常 广 ， 具 有 很 强 的 操作 性 和 专业 性 。 第 9 章 以 访谈 的 形式 介绍 ] 
多 位 专家 对 一 系列 重要 问题 的 看 法 ， 入 木 三 分， 很 有 启发 性 。 第 10 章 以 讲 故 事 的 方式 ,把 
Smashing ”Magazine 的 创办 和 发 展 过 程 娓 娓 道 玉 ， 同 时 之 无 保留 地 分 享 了 两 位 创始 人 的 成 
功 秘诀 和 价值 观 ， 让 人 受益 菲 浅 。 全 书 届 辑 严 密 、 言 简 意 赚 ， 设 计 人 员 可 以 快速 地 找到 巨 
已 想 要 的 东西 。 















































































































































































































































本 书 最 大 的 价值 在 于 它 在 传授 具体 经 验 的 同时 ， 也 对 设计 思想 和 设计 理念 进行 了 深入 的 
讨 ， 在 “ 授 人 以 鱼 ” 的 同时 ， 不 忘 “ 授 人 以 瘤 ”。 相 信 读 完 本 书 ， 读 者 一 定 会 有 一 利信 
恨 晚 的 感觉 。 
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TE 封面 设计 ， 周 亚 宁 

















(OD http://weibo.com/ptpitbooks 


分 类 建议 : 计算 机 / 网 页 设计 
人 民 邮 电 出 版 社 网 址 : www.ptpress.com.cn 





最 前 沿 的 上 T 类 电子 书 发 售 平台 
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版 的 时 代 已 经 来 


得 的 时 候 ， 图 灵 社 





巨变 。 作 为 国 
图 灵 社 区 目前 
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质 书 ， 电 子 书 具 
更 新 容易 ， 而 且 
纸 质 版 是 黑白 印 
剪贴 、 复 制 和 





























为 i 
: 在 线 阅读 和 PDF。 


区 已 经 采取 实际 行 
第 一 家 发 售 电子 图 



































有 许多 明显 的 优势 。 
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。 读 者 还 可 





最 方便 的 开放 出 版 平台 
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版 和 开源 出 版 的 梦想 。 利 用 
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译 者 。 
需要 有 





合 二 三 好 友 
的 形式 提供 给 读者 。 
这 极 大 地 降低 了 出 版 的 六 
愿 ， 图 灵 社 区 就 能 帮助 你 实现 这 个 梦想 。 
会 入 选 出 版 计划 ， 
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你 通过 试 译 





t 同 创作 一 部 技术 参考 书 ， 
(收费 


HSCS, # 
社区 公布 。 如 果 你 有 意 翻译 哪 本 图 书 ， 











临 。 在 许多 出 版 界 同行 还 在 狂 
[ 动 拥抱 这 个 
书 的 IT 类 出 
支 者 提供 两 种 DRM-free 的 阅读 





它 不 仅 发 


能 采用 了 彩色 图 片 
外 方便 地 进 


问 读 者 开放 在 线 写作 功能 ， 协 助 你 实现 自 出 
“合集 ”功能 ， 你 就 能 联 
以 免费 或 收费 
形式 须 经 过 图 灵 社 区 立项 


(即使 








槛 。 





同时 











的 考验 ， 


出 版 纸 质 
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只 要 你 有 写作 





成 熟 的 


Jo 


了 将 在 立项 后 马上 在 
欢迎 你 来 社区 
即 可 签约 成 为 图 灵 的 
要 想 成 功 地 完成 一 本 书 的 翻译 工作 ， 是 





欢迎 加 入 
ALK 


步 把 传统 出 版 流程 与 电子 书 出 版 业务 
， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 网 上 
稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模 
， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 读者 以 较 
的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 
往 翻 译 版 技术 书 “ 出 版 即 过 时 ”的 缺憾 。 同 时 ， 敏 
捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 


为 方便 ， 可 以 
提前 消灭 书稿 中 的 错误 ， 最 大 程度 地 保证 图 书 出 版 
的 质量 。 


















































最 直接 的 读者 交流 平台 


在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 交 勘 
误 、 发 表 评论 ， 以 各 种 方式 与 作 译 者 、 编 辑 人 员 和 
其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 
银子 。 








你 可 以 积极 参与 社区 经 常 开展 的 访谈 、 审 读 、 评 选 
等 多 种 活动 ， 赢 取 积分 和 银子 ， 积 累 个 人 声望 。 





ituring.com.cn 


